为什么我的容器的弹性包装导致我的自动填充网格添加额外的空轨道行？

Question

在带有

grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));

的网格中取出 3 个 100px 高度的项目，然后将该网格放入带有

flex-wrap: wrap;

的 Flex 容器中，将推动 Flex 容器的高度为 332px，而不是网格的 100px 高度（经过测试的 chrome）和野生动物园）。

在找到解决方案之前，我只是在这个问题上碰了头：设置

flex-wrap: nowrap;

。我确实意识到有时也与

flex-direction: columns;

有关，但我不明白为什么这个 Flex 属性会对网格产生影响。有人可以解释一下吗？还可以接受更清洁的修复。

代码笔

.flex-container {
  background-color: #aaa;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-wrap: wrap;
  /*problem is here, solved with "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>

Answer 1

将宽度添加到

.grid-container

.grid-container{
  /* */
  width: 100%
}

.flex-container {
  background-color: #aaa;
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-wrap: wrap;
  /*problem is here, solved with "nowrap"*/
}

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

.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>