如何阻止flex溢出父级[重复]

Question

从 Fiddle 考虑以下 HTML/CSS

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  font-size: 5rem;
}

.fill-rest {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: start;
  background-color: green;
}

.fill-rest div {
  background-color: red;
}

<main>
  <div>Some Text!</div>
  <div>Some Text!</div>
  <div class="fill-rest">
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
  </div>
</main>

为什么 - 如果“溢出”的 div 不存在，元素的高度正是我想要的，但是一旦你添加太多元素，.fill-rest 高度就会变为父元素的 100% “剩余空间”？

我试图找到一种方法使.fill-rest 不会溢出main 并在剩余空间被占用时开始包装。

Answer 1

像这样更改您的 .fill-rest 类：

.fill-rest {
  display: flex;
  flex-wrap: wrap !important;
  background-color: green;
}

Working example（尝试调整窗口大小以查看 div 的环绕）。

Answer 2

经过一些其他搜索词，我发现了以下from this question：

弹性项目的初始设置是 min-width: auto。这意味着默认情况下，弹性项目不能小于其内容的大小。

添加min-height: 0; 解决了我的问题：

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

main {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  font-size: 5rem;
}

.fill-rest {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: start;
  background-color: green;
  min-height: 0;
}

.fill-rest div {
  background-color: red;
}

<main>
  <div>Some Text!</div>
  <div>Some Text!</div>
  <div class="fill-rest">
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
    <div>Overflowing</div>
  </div>
</main>