<p>2 つの flex アイテムを含む flex コンテナがあります。最初のフレックス項目はコンテナの幅を決定し、2 番目のフレックス項目はコンテナの周囲を囲む必要があります。 Tailwind CSS をスタイル設定に使用していますが、希望するレイアウトが得られません。 <br /><br />これが私の現在のコードです: </p><p><br /></p>
<pre class="brush:html;toolbar:false;"><div class="flex flex-col">
<div class="flex-initial w-2/3 bg-blue-500 p-4"> <!-- 最初の子 -->
<!-- 最初の子の内容 -->
</div>
<div class="bg-red-500 p-4"> <!-- 残りのすべてのコンポーネントがそれを囲みます -->
<!-- 残りのコンポーネントの内容 -->
</div>
</div>
</pre>
<p>w-2/3 を使用して最初の子の幅を設定しようとしましたが、2 番目の子は依然としてコンテナ内の使用可能なスペースをすべて占有します。 2 番目の flex アイテムを最初のアイテムの周囲にラップさせ、最初のアイテムにコンテナの幅を決定させるにはどうすればよいでしょうか? <br /><br />ご支援やご指導を賜りまして、誠にありがとうございます。前もって感謝します! </p>
問題を完全に理解しているかどうかはわかりませんが、解決策は次のとおりです。