【簡単】display:flexを指定した中でword-wrap: break-wordが適用されない場合の対処法

最近、案件でCSSを触ることが増えてきました。

フロントエンド周りをガッツリやるようになったのは今年度に入ってからなので、CSSとかはまだまだ手探り状態です。

そのため、CSSのちょっとしたところでつまずくことが多いのですが、今回はdisplay: flexを指定した中で文章を改行させようとしたところで悩んでしまいました。

改行のためにword-wrap: break-wordを指定したのですが、display:flexを指定した中だけうまく改行されないのです。

調べてみたところ、display:flexを指定した際にはCSSに追加すべき要素があることを知りました。

調べるのにちょっと時間がかかってしまったので、同じように困っている方向けに記事にまとめようと思います。

そんなわけで、今回はdisplay:flexを指定した中でword-wrap: break-wordがうまく適用されない場合の対処法についてご紹介しますね。

display:flexを指定した中でword-wrap: break-wordを使う場合はmin-widthが必要！

見出しにも書きましたが、display:flexを指定した要素の中でword-wrap: break-wordを使う場合は、min-widthの指定が必要だったのです。

stackoverflowに以下のような回答がありました。

By default, if no min-width is set, the item’s content min-width is assumed and the flex item’s width will never be smaller. By setting a min-width of e.g. 40%, the item will shrink to at most 40% of the flex parent.

.child2, .child3 {
min-width: 40%;
}

引用： flex item overflows container due to long word even after using word-wrap

ざっくり意味を取ると、「min-widthを指定していないとコンテンツの幅はflexアイテムの幅になっちゃって短くならないよ」というようなことが書かれています。

なるほどと思い、もう少し調べてみたところ、こちらのブログ様に詳細な説明がありました。

こちらの記事を引用させていただきますと、

flex アイテム (display: flex または display: inline-flex を指定した要素の子要素) の最小幅 (flex アイテムが水平方向に並ぶ場合) は、(min-width プロパティで明示的に指定していなければ) flex アイテムの内容の最小幅または flex アイテムに width プロパティで明示的に指定された幅などのうち、最も小さいものになる (flex アイテムの幅がそれ以上縮むことはない) そうです。

引用：「Days on the Moon」flexbox レイアウトで内容がはみ出す理由

とのことで、display: flex のように指定した要素の子要素（flexアイテム）の中では、最小幅はmin-widthまたはflexアイテムの最小幅になるそうです。

そのため、

ここで「内容の最小幅」を算出するときには word-wrap: break-word の影響を考慮できません (break-word は行ボックスの幅からあふれる単語に影響を与えるが、最小幅を算出しようという段階では行ボックスの幅も定まっていない)。なので、width も min-width も明示的に指定していない flex アイテムの内容に長い英単語があると、その単語の幅まで flex アイテムの幅が拡張されるということのようです (そして min-width が明示的に指定されていればそのようなことは起こらない)。

引用：「Days on the Moon」flexbox レイアウトで内容がはみ出す理由

というように、最小幅が英単語の幅などに引っ張られてしまい、結果的にflexアイテムの幅が広がってしまうようです。

今回、私が遭遇した現象はまさしくこれでした。
以下のように、display:flex を指定した要素の中で改行を行おうとして失敗していました。

<!-- HTMLファイル -->
<div class="parent">
  <div class="child">
     hogehogehogehogehogehogehogehogehogehogehogehogehogehogehogehoge
  </div>
  <div class="child">
     fugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafugafuga
  </div>
</div>

/* CSSファイル */
.parent{
  width:100%;
  display:flex;
  flex-direction:row;
}
.child{
  word-wrap:break-word;
}

上記のコードでは、以下のように表示されます。
（識別しやすいように、hogeとfugaの背景に色をつけています）

PCで見るとhogeとfugaが1行になってはみ出てしまっていますね。。
スマホからだとそもそもfugaが画面外で見えないですし。。

そこで、stackoverflowや上記ブログ様の指示通りにmin-widthを指定してみたところ、綺麗に改行されたのです。

.child{
  word-wrap:break-word;
  min-width:40%; /* ここを追加 */
}

この件を経て、CSSは結構奥が深いんだなぁと認識を新たにしました。
これからはもう少しいろいろと確認していこうと思います。

終わりに

今回はdisplay:flexを指定した中でword-wrap: break-wordがうまく適用されない場合の対処法についてご紹介しました。

内容をまとめると以下のようになります。

今回はここまでです。それでは。