如何使main-wrap元素填充flex父容器main-content的完整高度？

要让main-wrap填满父容器main-content的高度，有两种简单可行的方式：

方法一：利用Flex布局的拉伸特性 #

父容器main-content已经设置为display: flex，默认情况下align-items属性值为stretch，若未自动生效，可明确添加该属性，让子元素自动拉伸填满父容器的交叉轴高度：

修改main-content的CSS代码：

.main-content {
  height: calc(100% - 50px);
  width: 100%;
  position: absolute;
  bottom: 0;
  overflow-y: overlay;
  display: flex;
  justify-content: center;
  align-items: stretch; /* 添加此行 */
}

方法二：直接设置子元素高度为100% #

给main-wrap添加height: 100%，让它直接继承父容器的高度：

修改main-wrap的CSS代码：

.main-wrap {
  width: 40%;
  border-left: 1px solid black;
  border-right: 1px solid black;
  height: 100%; /* 添加此行 */
}

两种方法都能实现需求，推荐第一种，更贴合Flex布局的设计逻辑。

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