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幅)
ぐぐっていたら解決方法があった。 こちら