使用flex-1的两个子元素无法换行问题（TailwindCSS）

问题出在子元素的flex-1属性上：flex-1等价于flex: 1 1 0%，但flex元素默认的min-width: auto会让子元素尽可能收缩到内容的最小宽度，导致容器宽度即使很小，也很难触发flex-wrap的换行逻辑。

解决方案 #

给每个子元素添加最小宽度限制，让容器宽度不足以容纳两个子元素的最小宽度+间隙时，自动触发换行。

修改后的代码 #

<div class="flex flex-wrap justify-between gap-2 w-full">
  <div class="flex-1 min-w-[200px]">
    <label for="other_city"
           class="block sm:text-sm font-medium text-gray-500">
      {% translate "City" %}
    </label>
    <input type="text"
           id="other_city"
           placeholder=""
           autocomplete="off"
           class="mt-1 w-full rounded-md border-gray-200 text-black font-medium sm:text-sm"/>
  </div>
  {# Postal Code #}
  <div class="flex-1 min-w-[200px]">
    <label for="other_postal_code"
           class="block sm:text-sm font-medium text-gray-500">
      {% translate "ZIP / Postal Code" %}
    </label>
    <input type="text"
           id="other_postal_code"
           placeholder=""
           autocomplete="off"
           class="mt-1 w-full rounded-md border-gray-200 text-black font-medium sm:text-sm"/>
  </div>
</div>

说明 #

• min-w-[200px]是自定义的最小宽度，你可以根据实际需求调整这个值（比如改成min-w-[180px]或用Tailwind内置类min-w-sm）。
• 保留flex-1让子元素在空间充足时自动平分可用宽度，保证并排展示的布局效果。

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