flex布局子元素无法填充父容器垂直空间，该如何调整配置？

问题原因 #

你为父容器.vLayout配置了一系列flex布局属性，但遗漏了flex容器的核心声明display: flex，浏览器默认将其渲染为普通块级元素，后续所有flex相关配置都不会生效，自然无法触发子元素的拉伸规则。

解决方案 #

在.vLayout的样式规则中新增display: flex即可实现预期效果，修改后的完整样式如下：

.vLayout {
  background-color: #ff0000;
  position: absolute;
  display: flex; /* 新增关键配置 */
  flex-wrap: nowrap;
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
  gap: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: 10px;
  
}

.hLayout {
  background-color: #ffff00;
  margin: 10px;
  flex-grow: 1;
}

补充说明 #

display: flex是将元素声明为flex容器的必要前提，只有添加该属性后，你配置的flex-direction、align-items以及子元素的flex-grow等规则才会生效。flex-direction: column指定容器主轴为垂直方向，子元素flex-grow: 1会让两个子元素均分父容器的剩余垂直空间，align-items: stretch则保证子元素水平方向自动填充满父容器宽度。

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