如何让flex-wrap元素在换行时自动收缩以消除多余空白？

我有一个带灰色背景的行级flex-wrap元素：

• 当屏幕宽度足够容纳所有子元素时，该行仅占据子元素所需的宽度
  
• 当屏幕尺寸缩小导致元素换行时，该行仍会在子元素周围占据多余空间（灰色区域可见）
  

如何让它收缩以消除这些空白？

当前代码：

<div class="flex flex-col h-100 items-center justify-center bg-black">
  <div class="inline-flex shrink flex-wrap justify-center gap-2 bg-gray-600">
    <div class="h-20 w-52 bg-white"></div>
    <div class="h-20 w-52 bg-white"></div>
    <div class="h-20 w-52 bg-white"></div>
  </div>
</div>

解决方案：添加w-fit类 #

给灰色背景的flex容器添加w-fit类（对应CSS原生属性width: fit-content），即可让容器宽度自适应内容，消除换行后的多余空白：

修改后的代码：

<div class="flex flex-col h-100 items-center justify-center bg-black">
  <div class="inline-flex shrink flex-wrap justify-center gap-2 bg-gray-600 w-fit">
    <div class="h-20 w-52 bg-white"></div>
    <div class="h-20 w-52 bg-white"></div>
    <div class="h-20 w-52 bg-white"></div>
  </div>
</div>

原理说明：

fit-content属性会让元素的宽度取以下两者中的较小值：

1. 内容不换行时的总宽度（子元素宽度+gap总和）
2. 当前可用的最大宽度

当子元素换行后，容器会自动收缩到当前布局中最宽一行的宽度，从而让灰色背景完全贴合内容，消除多余空白区域，同时保留屏幕足够宽时的正常显示效果。

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