包装弹性项目之间不需要的空间

Question

当我将弹性容器的高度设置为大于弹性项目所占据的高度时，包裹的项目之间会留有空间。请注意 - justify-content 和align-items 都设置为flex-start。这是片段（运行后单击整页）

.flex-container {
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}
header,
main,
aside,
footer {
  padding: 1rem;
  background-color: tomato;
}
header,
footer {
  width: 100%;
}
main {
  width: 75%;
}
aside {
  flex-grow: 1;
}

<div class="flex-container">
  <header>Header Content</header>
  <main>Main content here.</main>
  <aside>Sidebar content</aside>
  <footer>Footer Content</footer>
</div>

这是笔

flex-direction: column;如果您反转所有属性，则可以重现这一点。这是预期的行为吗？如果是这样，为什么？有没有办法让我解决这个问题并得到类似的东西：

将 flex-container 高度设置为 100vh ？

Answer 1

不添加额外标记的正确答案是align-content: flex-start;- 默认是stretch，这就是为什么当弹性容器的大小超过其中元素的大小时，包装元素之间有额外的空间。