Flex Box子项无法占满行可用空间，求原因与解决方案

问题背景 #

基于Kevin Powell《Conquering Responsive Layouts》挑战#2，右侧.vert-row（橙色边框）设置了flex-direction: column，但内部.vert__item（绿黄色边框）无法填满垂直空间，底部总有空白。尝试给.vert__item添加flex-grow:1、align-self: stretch均无效，意外发现将.vert__item的padding和font-size从rem改为em后，子项能占满空间，需明确该现象原因及合理解决方案。

代码示例 #

CSS代码 #

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 1.3rem;
}

img {
  max-width: 100%;
}

h1 {
  font-size: 3rem;
  margin-top: 0;
}

.container {
  width: 80%;
  max-width: 1100px;
  margin: 0 auto;
}

.row {
  display: flex;
  justify-content: space-between;
  gap: 3em;
  border: 4px solid navy;
}

.vert-row {
  border: 4px solid orangered;
  justify-content: space-between;
  flex-direction: column;
  width: 40%;
  text-align: center;
  align-items: stretch;
}

.vert__item {
  border: 4px solid greenyellow;
  color: white;
  background-color: #136c72;
  padding: 1rem;
  align-self: stretch;
  font-size: 1rem;
  flex-grow: 1;
}

.vert__item h1 {
  font-size: 1.3rem;
}

.quality_designs {
  width: 60%;
  text-align: left;
  border: 4px solid black;
}

.divider {
  margin-top: 2em;
}

.accent {
  color: #136c72;
}

.col {
  width: 100%;
}

.col + .col {
  margin-left: 30px;
}

HTML代码 #

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Conquering Rsponsive Layouts</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section class="container divider">
    <div class="row">
      <div class="quality_designs">
        <h1 class="accent">Quality designs made custom, on demand, just for you</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </p>
      </div>
      <div class="vert-row">
        <div class="vert__item">
          <h1>Cheap</h1>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
        <div class="vert__item">
          <h1>Cheap</h1>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
        <div class="vert__item">
          <h1>Cheap</h1>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
        </div>
      </div>
    </div>
  </section>

</body>

原因分析 #

1. justify-content: space-between与flex-grow冲突：.vert-row设置的justify-content: space-between会将容器垂直剩余空间分配到子项之间的间隙中，而非让子项通过flex-grow:1扩展自身高度，这是flex-grow失效的核心原因。
2. rem改em的巧合效果：将单位改为em后，.vert__item的尺寸基于父元素.vert-row的字体大小（继承自body的1.3rem）计算，内容高度恰好填满剩余空间，这是偶然的尺寸适配，并非解决问题的正确逻辑。

解决方案 #

要让.vert__item垂直填满容器，只需调整两个关键设置：

1. 移除.vert-row的justify-content: space-between：该属性会抢占剩余空间用于子项间隙，阻碍flex-grow生效。
2. 保留.vert__item的flex-grow:1：在.vert-row无justify-content干扰的情况下，flex-grow:1会让三个子项平分垂直空间，完全填满容器。

修改后的关键CSS代码：

.vert-row {
  border: 4px solid orangered;
  flex-direction: column;
  width: 40%;
  text-align: center;
  align-items: stretch;
  /* 移除justify-content: space-between */
}

.vert__item {
  border: 4px solid greenyellow;
  color: white;
  background-color: #136c72;
  padding: 1rem;
  font-size: 1rem;
  flex-grow: 1;
  /* 可选：若需内部文字垂直居中，添加以下代码 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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