无法使用align-items:stretch时，让Flex行子容器占满容器高度的方法

这个问题我之前也碰到过，确实在父容器align-items只能设为center或flex-start的限制下，直接给子容器设百分比高度会失效，不过有几个靠谱的办法能实现左侧子容器和右侧内容容器高度匹配的需求：

方案1：用align-self: stretch单独控制子容器 #

父容器的align-items是全局交叉轴对齐设置，但每个子容器可以通过align-self属性单独覆盖这个规则。即使父容器设了center或flex-start，给左侧和中间子容器加上align-self: stretch，它们就会自动拉伸至父容器的高度——而父容器的高度刚好是由右侧内容容器撑开的，完美实现高度匹配。

示例代码：

.parent {
  display: flex;
  align-items: center; /* 或者 flex-start，按需求选择 */
  gap: 12px; /* 可选，子容器间的间距 */
}

.left, .mid {
  align-self: stretch;
  width: 140px; /* 自定义宽度 */
  background-color: #f0f0f0;
}

.right {
  /* 右侧内容容器，高度由内部内容自动撑开 */
  background-color: #e0e0e0;
  padding: 24px;
}

方案2：绝对定位拉伸子容器 #

如果方案1和现有布局有冲突，还可以用绝对定位实现。给父容器设置position: relative，让左侧/中间子容器通过绝对定位绑定父容器的上下边缘，父容器的高度会被右侧内容容器自动撑开，这样左侧容器自然就和右侧高度一致了。

示例代码：

.parent {
  display: flex;
  align-items: flex-start; /* 或者 center */
  position: relative;
  gap: 12px;
  padding-left: 152px; /* 给左侧容器预留宽度，避免内容重叠 */
}

.left {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 140px;
  background-color: #f0f0f0;
}

.right {
  background-color: #e0e0e0;
  padding: 24px;
}

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