ホワイトスペース: nowrap with flex: 1; 子の幅が小さすぎてテキストを収容できません
P粉776412597
2023-09-04 13:30:47
<p>同じサイズの 2 つの div をテキストに 1 行に収める解決策が見つかりません。空白のように見えます。親の width:fit-content を設定した後、幅は考慮されなくなりました。 </p>
<p>これらは可能な限り小さく、常に同じサイズにする必要があり、テキストを 2 行目に折り返さないでください。 </p>
<p>
<pre class="ブラシ:css;ツールバー:false;">div {
ディスプレイ: フレックス;
幅: コンテンツに合わせて;
}
。ボタン {
パディング: 10px 20px;
フレックス: 1;
ホワイトスペース: ナラップ;
最小幅: 130px;
幅: コンテンツに合わせて;
}
.button1 {
背景: 赤;
}
.button2 {
背景: 緑;
}</pre>
<pre class="brush:html;toolbar:false;"><div>
<div class="button button1">短いテキスト</div>
<div class="button button2">幅が広い長いテキスト ボタン </div>
</div></pre>
</p>
CSS グリッドを使用して実行できます: