表示される要素の幅や表示位置について

Question

現在、HTML,CSSを使用したUIの構築を行なっているのですが、表示がうまくいかなかった為、ご助言頂きたく質問させて貰いました。
コードの方は以下になります。

<div class="info">
  <p>教科データです</p>
  <p class="name">testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest</p>
  <div class="item">
    <div>
      <p>テスト</p>
      <p>項目1:数学</p>
      <p>項目2:英語</p>
    </div>
  </div>
</div>

.info {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: stretch;
  background-color: #F5F5F5;
  border: solid 1px #C4C4C4;
}

.name,
.item {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
}

.name {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: calc(50% + 1px);
  max-width: calc(50% + 1px);
  margin: 0;
  padding: 0 1px 0 0;
  background-image: linear-gradient(#C4C4C4, #C4C4C4);
  background-repeat: no-repeat;
  background-size: 1px 80%;
  background-position: right center;
}

.item {
  flex-grow: 1;
  flex-shrink: 1;
}

こちら、JSFiddleにて動作確認可能な状態となっております為、一度ご確認頂けましたら幸いです。
問題点ですが、現状、htmlのnameクラスに設定した文字列が真ん中の縦線を突っ切って右側に大きく入り込んでしまっています。

また、日本語の文字列を<p class="name">テストテストテストテストテストテスト</p>こちらのように設定した場合に、左端ではなく真ん中の場所から表示されるようになってしまっています。

こちらの２点の解決方法が分からない為、どなたかご助言頂けましたら幸いです

Answer 1

htmlのnameクラスに設定した文字列が真ん中の縦線を突っ切って右側に大きく入り込んでしまっています。

→.nameにword-break: break-all;を追加

左端ではなく真ん中の場所から表示されるようになってしまっています。

→infoの中がflexになっているので、教科データとテストのpタグをdivタグで囲ってください。
widthが崩れるので、囲ったdivにwidth設定、.nameのmax-widthを外すなど適宜調整してください。

<div class="info">
    <div id="hoge">
 　　　 <p>教科データです</p>
  　　　<p class="name">test</p>
    </div>
…

Comments

[study_111]

ご回答ありがとうございます。
> htmlのnameクラスに設定した文字列が真ん中の縦線を突っ切って右側に大きく入り込んでしまっています。
こちらに関しましては、 ward-breakにbreak-allプロパティを追加することで解決することが出来ました。
>教科データとテストのpタグをdivタグで囲ってください。
こちらdivタグで囲う形にし、widthを設定してみたのですが、元々の表示に影響が出てしまったのか少々崩れた形となってしまいました...

Answer 2

右側に大きく入り込んでしまっています。

word-breakの設定で変更できます。

word-break - CSS: カスケーディングスタイルシート | MDN

左端ではなく真ん中の場所から表示されるようになってしまっています。

.nameの以下の設定が効いています。

justify-content: center;
align-items: center;

Comments

[study_111]

ご回答ありがとうございます。
> word-breakの設定で変更できます。
こちら、break-allプロパティを設定することで、改行されるようになりました。
> .nameの以下の設定が効いています。
こちら試しに2つのプロパティを外してみたのですが、表示が崩れてしまいました。
何か解決する方法はありますでしょうか...?

[itagagaki]

justify-content: left;
にすれば左に寄ります。
align-items: center;
はそれでいいのかな。