フレックスアイテムをコンテンツサイズよりも小さくできないのはなぜですか?
<p>フレックスボックス列が 4 つあり、すべて正常に動作しますが、1 つの列にテキストを追加して大きなフォント サイズに設定すると、フレックス プロパティにより列が本来よりも広くなってしまいます。 </p>
<p><code>word-break:break-word</code> を使用してみましたが、列のサイズを非常に狭い幅に変更すると、テキスト内の文字が複数の行に分割されてしまいます（1 行）ただし、列の幅は文字のサイズより小さくなることはありません。 </p>
<p> このビデオをご覧ください (最初は最初の列が最小ですが、ウィンドウのサイズを変更すると、それが最も幅の広い列になります。常にフレックス設定を尊重したいだけです。フレックス サイズは 1:3 です: 4 :4)
<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>
