如何在Tailwind CSS中实现第二个flex项环绕首个项且由其决定容器宽度？

你当前的布局问题根源在于：flex-col 的容器默认是块级元素，会占满父元素的100%宽度；同时在垂直flex布局中，子项默认继承 align-items: stretch，所以第二个子项会自动拉满容器的全部宽度，导致不符合“首个flex项决定容器宽度、第二个子项跟随其宽度”的需求。

要实现目标布局，核心是让外层flex容器的宽度由第一个子项决定，再让第二个子项适配容器宽度，具体调整如下：

方案1：垂直排列，第二个子项与第一个同宽 #

<div class="flex flex-col w-fit">
  <!-- 第一个子项：设置固定宽度或由内容决定宽度，以此定义容器宽度 -->
  <div class="w-64 bg-blue-500 p-4">
    第一个子项内容（宽度固定为64）
  </div>
  <!-- 第二个子项：默认继承stretch属性，自动占满容器宽度 -->
  <div class="bg-red-500 p-4">
    第二个子项内容（宽度与第一个子项一致）
  </div>
</div>

如果希望第一个子项的宽度由自身内容决定，只需将第一个子项的 w-64 替换为 w-fit：

<div class="flex flex-col w-fit">
  <div class="w-fit bg-blue-500 p-4">
    第一个子项的内容直接决定容器宽度
  </div>
  <div class="bg-red-500 p-4">
    第二个子项宽度跟随容器
  </div>
</div>

方案2：水平环绕（换行排列） #

如果你的“环绕”是指第二个子项在水平方向上随第一个子项宽度换行排列，需调整flex方向并开启换行：

<div class="flex flex-row flex-wrap w-fit">
  <div class="bg-blue-500 p-4">
    第一个子项，决定容器宽度
  </div>
  <div class="bg-red-500 p-4">
    第二个子项，宽度不足时自动环绕到第一个子项下方
  </div>
</div>

• 避免给第一个子项使用 w-2/3 这类基于父容器的比例类：因为父容器宽度现在由子项决定，比例类无法正确计算宽度。
• w-fit 是核心：让外层容器自动收缩到内部内容的最大宽度，也就是第一个子项的宽度。

内容的提问来源于stack exchange，提问作者meha