为何flex容器的flex-wrap会导致auto-fill网格出现额外空轨道行？

我在使用Grid和Flex布局时遇到了一个异常：将配置了grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));的网格容器（内部有3个高度100px的项目）放入设置了flex-wrap: wrap;的垂直方向Flex容器中时，Flex容器的高度变成了332px，而非网格本身的100px（已在Chrome和Safari中验证）。我通过设置flex-wrap: nowrap;解决了问题，但不理解Flex属性为何会影响Grid布局，且该问题还与flex-direction: column;相关，希望得到原理解释和更简洁的修复方案。

代码示例 #

.flex-container {
  background-color: #aaa;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-wrap: wrap; /* 问题根源，设置为nowrap可解决 */
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 16px;
  padding-inline-start: 0px;
  margin: 0;
}

.item {
  background-color: #cc0;
  height: 100px
}

<span>flex-container should have a height of 100px, but has 332px instead because of flex-wrap set to "wrap"</span>
<div class="flex-container">
  <ul class="grid-container">
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</div>

原理分析 #

这个问题的核心是Flex容器在column + wrap模式下的尺寸计算逻辑，与Grid容器的自适应列布局相互作用：

1. 当Flex容器设置flex-direction: column时，主轴为垂直方向，交叉轴为水平方向；加上flex-wrap: wrap后，Flex容器允许子元素在水平方向换行。
2. 默认情况下，Flex子元素（即Grid容器）的flex-shrink属性为1，意味着Flex容器会尽可能压缩子元素的宽度以适应布局。
3. Grid容器使用repeat(auto-fill, minmax(100px, 1fr))时，会根据自身宽度自动生成列数：当宽度被压缩到仅能容纳1列（≤100px）时，3个Grid项目会垂直堆叠，此时Grid容器的高度为100px*3 + 16px*2 = 332px（16px是项目间隙，3个项目有2个间隙）。
4. Flex容器的高度会自适应子元素的高度，因此最终Flex容器的高度变成了332px。
5. 而设置flex-wrap: nowrap时，Flex容器不允许子元素换行，Grid容器会被强制占据水平方向的全部可用宽度（100%），此时Grid能容纳3列，高度保持100px，Flex容器高度也随之正常。

修复方案 #

除了设置flex-wrap: nowrap，还有以下更灵活的修复方式：

• 阻止Grid容器被压缩：给Grid容器添加flex-shrink: 0，禁止Flex容器压缩它的宽度，Grid会保持100%宽度并显示3列，高度维持100px：

  .grid-container {
    /* 原有样式 */
    flex-shrink: 0;
  }
  

• 固定Grid容器的宽度占比：给Grid容器设置flex: 0 0 100%（即flex-grow:0, flex-shrink:0, flex-basis:100%），明确让它占据Flex容器的全部水平宽度：

  .grid-container {
    /* 原有样式 */
    flex: 0 0 100%;
  }
  

• 显式指定Grid容器宽度：在Flex布局中显式声明Grid容器的width: 100%，也能避免被压缩：

  .grid-container {
    /* 原有样式 */
    width: 100%;
  }
  

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