在Tailwind CSS中，如何将第二个flex项目环绕在第一个项目周围的指南

Question

我有一个包含两个flex项目的flex容器。第一个flex项目应该确定容器的宽度，而第二个flex项目应该环绕在其周围。我正在使用Tailwind CSS进行样式设置，但是我无法获得所需的布局。

这是我的当前代码：

<div class="flex flex-col">
  <div class="flex-initial w-2/3 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> 

我尝试使用w-2/3来设置第一个子元素的宽度，但是第二个子元素仍然占据了容器中所有可用的空间。我应该如何使第二个flex项目环绕在第一个项目周围，并且让第一个项目确定容器的宽度呢？

非常感谢您提供的任何帮助或指导！提前致谢！

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>