<p>Ich habe einen Flex-Container mit zwei Flex-Elementen. Das erste Flex-Element sollte die Breite des Containers bestimmen und das zweite Flex-Element sollte ihn umschließen. Ich verwende Tailwind CSS für die Gestaltung, kann aber nicht das gewünschte Layout erhalten. <br /><br />Das ist mein aktueller Code: </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"> <!-- Das erste Kind --> <!-- Inhalt des ersten untergeordneten Elements --> </div> <div class="bg-red-500 p-4"> <!-- Alle restlichen Komponenten werden umschlossen --> <!-- Inhalt der restlichen Komponenten --> </div> </div> </pre> <p>Ich habe versucht, mit w-2/3 die Breite des ersten untergeordneten Elements festzulegen, aber das zweite untergeordnete Element nimmt immer noch den gesamten verfügbaren Platz im Container ein. Wie soll ich dafür sorgen, dass das zweite flexible Element das erste Element umschließt und das erste Element die Breite des Containers bestimmen lässt? <br /><br />Vielen Dank für jede Hilfe oder Anleitung, die Sie geben können! Dank im Voraus! </p><p><br /></p>

<div class="w-fit flex flex-col">
  <div class="flex-initial w-56 bg-blue-500 p-4"> <!-- The first child -->
    <!-- Content of the first child -->
  </div>
  <div class="bg-red-500 p-4"> <!-- All the rest components wrap around it -->
    <!-- Content of the rest components -->
  </div>
</div>