CSS flexbox【日常 個人サービス製作日誌】

flexboxアイテム　テキストが長いとはみ出てしまう

例)

<div class = "flex">
  <div class="problem">hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge hoge</div>
  <div class="normal">hoge </div>
</div>

.flex {
    display: flexbox;
    width: 100px
}
.problem {
  flex-grow: 1;
}
.normal {
  flex-grow: 4;
}

フレックボックス幅が100pxとして、2つのフレックスアイテムがある場合を想定します。 それぞれのアイテムの長さ比率は1：4の幅で分割しています(flex-growプロパティ使用)。 テキストが長い場合、はみ出て表示されてしまう。(今回のケースだと .problemは20px幅)

ぐぐっていたら解決方法があった。 こちら