如何让.left类div在.right类有内容时完全填充红色背景？

问题出在.container的align-items: center属性上——这个设置会让两个flex子元素（.left和.right）在垂直方向居中对齐，导致.left的高度只适配自身内容，无法撑满容器的整体高度。

修复方案 #

把.container里的align-items: center替换为align-items: stretch，或者直接删除这个属性（因为flex布局中align-items的默认值就是stretch），这样.left会自动拉伸，填满容器的垂直高度，红色背景就能完全覆盖了。

修改后的完整代码 #

CSS

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  border: 1px solid #bebebe;
  border-radius: 5px;
}

.left {
  background-color: red;
  padding: 0 8px;
  flex-grow: 1;
  display: flex;
  /* 可选：让内部单选框垂直居中 */
  align-items: center;
}

.right {
  width: 100%;
  background-color: blue;
}

HTML

<div class="container">
  <div class="left">
    <input type="radio" />
  </div>
  <div class="right">
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
    <p>test2</p>
  </div>
</div>

如果需要让.left内部的单选框保持垂直居中，可以在.left里添加align-items: center，这样既能保证背景铺满容器，又能让内容居中显示。

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