如何实现容器子元素平分剩余空间并适配底部固定元素？

需求：创建一个容器，使内部多个子元素平分容器的剩余高度（例如4个元素各占剩余空间的25%），同时容器底部包含一个仅占据自身所需空间的元素。

完整实现代码 #

HTML 代码

<div class="container">
  <div class='innerContainer'>
    <p>此元素平分父容器剩余高度</p>
    <p>此元素平分父容器剩余高度</p>
    <!-- 可添加更多p标签，自动平分剩余高度 -->
  </div>
  <p class="footer">底部元素，仅占据自身所需空间</p>
</div>

CSS 代码

.container {
  height: 200px;
  display: flex;
  flex-direction: column;
  border: 1px dotted black;
}

.innerContainer {
  flex: 1 1 auto; 
  border: 1px dashed black;
  display: flex;
  flex-direction: column;
}

.innerContainer p {
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center; /* 可选，让文字垂直居中 */
}

.footer {
  flex: 0 1 auto; 
  border: 1px solid black; 
  margin: 0; 
  padding: 0;
}

关键属性说明 #

• .container：通过display: flex和flex-direction: column设置为垂直方向的弹性容器，固定高度为内部元素提供明确的空间分配基准。
• .innerContainer：flex: 1 1 auto使其占据容器中除底部元素外的所有剩余空间，同时自身也设为垂直弹性容器，让内部子元素可平分高度。
• .innerContainer p：flex: 1让每个子元素平分.innerContainer的高度，添加display: flex和align-items: center可让文字在元素内垂直居中（可选）。
• .footer：flex: 0 1 auto确保它仅占用自身内容所需高度，不会放大占用额外空间，必要时可缩小适应容器。

内容的提问来源于stack exchange，提问作者Michał Turczyn