Anleitung zum Umschließen des zweiten Flex-Elements um das erste Element in Tailwind CSS

Question

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.

Das ist mein aktueller Code:

<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>

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?

Vielen Dank für jede Hilfe oder Anleitung, die Sie geben können! Dank im Voraus!

Answer 1

我不确定我是否完全理解您的问题，但这是我认为的解决方案：

• 首先，对于第一个子div，使用固定宽度，比如w-56。
• 然后给父div添加一个w-fit类。

<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>