フレックスアイテムがコンテンツサイズを超えて縮小しないのはなぜですか?
<p>Flexbox 列が 4 つあり、すべて正常に動作しますが、列にテキストを追加して大きなフォント サイズに設定すると、Flex プロパティにより列が本来よりも広くなってしまいます。 </p>
<p><code>word-break:break-word</code> を使用してみましたが、列のサイズを非常に狭い幅に変更すると、テキスト内の文字が複数の行に分割されました (1 行)ただし、列幅は文字のサイズ以上になります。 </p>
<p>このビデオを見る
(最初は最初の列が最小ですが、ウィンドウのサイズを変更すると、それが最も幅の広い列になります。常に Flex 設定を尊重したいだけです。Flex サイズは 1:3:4:4) </p>
<p>フォント サイズと列のパディングを小さく設定すると解決することはわかっていますが、他に解決策はありますか? </p>
<p><code>overflow-x:hidden</code> は使用できません。 </p>
<p>JSFiddle</p>
<p><br /></p>
<pre class="brush:css;toolbar:false;">.container {
ディスプレイ: フレックス;
幅: 100%
}
.col {
最小高さ: 200px;
パディング: 30px;
単語の区切り: 単語の区切り
}
.col1 {
フレックス: 1;
背景: オレンジ;
フォントサイズ: 80px
}
.col2 {
フレックス: 3;
背景: 黄色
}
.col3 {
フレックス: 4;
背景: スカイブルー
}
.col4 {
フレックス: 4;
背景: 赤
}</pre>
<pre class="brush:html;toolbar:false;"><div class="container">
<div class="colcol1">ロレム・イプサム・ドール</div>
<div class="colcol2">ロレム・イプサム・ドール</div>
<div class="colcol3">ロレム・イプサム・ドール</div>
<div class="colcol4">ロレム・イプサム・ドール</div>
</div></pre>
<p><br /></p>
