设置flex-grow:1导致div高度超出可用空间的技术求助

需求：让middle和bottom两个div固定在屏幕底部，fill div填充剩余空间，不出现滚动条且底部元素不被挤出，但实际效果中fill高度超出可用空间，底部元素不可见，页面出现滚动条。

原代码 #

CSS #

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  background-color: aqua;
}

.box {
  width: 100%;
  height: 100%;
  flex-grow: 1;
  background-color: cadetblue;
  display: flex;
  flex-direction: column;
}

.fill {
  flex-grow: 1;
  background-color: antiquewhite;
}

.middle {
  height: fit-content;
  background-color: azure;
  justify-self: flex-end;
}

.bottom {
  height: fit-content;
  background-color: darkgray;
  justify-self: flex-end;
}

HTML #

<div class="container">
  <h3>Title</h3>

  <div>Some Stuff</div>

  <div class="box">
    <div class="fill">Fill</div>

    <div class="middle">Middle</div>

    <div class="bottom">Bottom</div>
  </div>
</div>

问题原因 #

1. 未设置html和body的高度，导致.container的height:100%没有正确参考基准，高度计算异常。
2. .box同时设置height:100%和flex-grow:1，双重高度规则引发容器高度溢出。
3. justify-self在垂直方向的flex布局（flex-direction:column）中不生效，无法将元素推到底部。

解决方案 #

修改后的代码如下：

CSS #

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

.container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box; /* 避免padding撑开容器导致溢出 */
  background-color: aqua;
}

.box {
  width: 100%;
  flex-grow: 1;
  background-color: cadetblue;
  display: flex;
  flex-direction: column;
}

.fill {
  flex-grow: 1;
  background-color: antiquewhite;
}

.middle {
  height: fit-content;
  background-color: azure;
  margin-top: auto; /* 自动填充上方空间，将元素推到底部 */
}

.bottom {
  height: fit-content;
  background-color: darkgray;
}

HTML #

<div class="container">
  <h3>Title</h3>

  <div>Some Stuff</div>

  <div class="box">
    <div class="fill">Fill</div>

    <div class="middle">Middle</div>

    <div class="bottom">Bottom</div>
  </div>
</div>

修改说明 #

1. 给html和body设置height:100%并清除默认margin，确保.container高度正确覆盖视口。
2. 给.container添加box-sizing: border-box，避免padding撑开容器引发宽高溢出。
3. 移除.box的height:100%，仅保留flex-grow:1，让它自动占据.container的剩余垂直空间。
4. 给.middle添加margin-top:auto，利用flex布局的margin特性，自动填充fill下方剩余空间，将middle和bottom固定在.box底部。

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