当使用 flex 布局时，若希望 `.left` 元素（如含单选框的容器）与同级 `.right` 内容区域保持等高并完整填充背景色，关键在于修正父容器的 `align-items` 属性，默认的 `center` 会限制子项高度，改为 `stretch` 即可实现自动拉伸对齐。
在 Flex 容器中，align-items 控制的是交叉轴（cross axis）上子元素的对齐方式。对于 flex-direction: row（默认），交叉轴即为垂直方向（Y 轴）。此时：
- align-items: center：将每个子项在其交叉轴方向居中对齐，高度由其自身内容决定，不会撑满容器高度；
- align-items: stretch（默认值）：使所有子项在交叉轴方向自动拉伸以填满容器高度——这正是实现左右等高的核心机制。
因此，只需将 .container 的 align-items: center 替换为 align-items: stretch（注意：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; /* 可选：让 radio 水平垂直居中 */ justify-content: center; } .right { width: 100%; background-color: blue; padding: 12px; /* 推荐添加内边距提升可读性 */ }⚠️ 注意事项：
- 不要同时保留 align-items: center 和 align-items: stretch —— 后者会生效，但冗余代码易引发维护困惑；
- 若 .left 中仅有一个 ，建议为其添加 align-items: center 和 justify-content: center，确保单选框在红色区域内居中显示；
- flex-grow: 1 已使 .left 占据剩余空间，无需额外设置宽度；
- 如需响应式适配，可结合 min-height 或 min-block-size 防止内容过少时高度塌陷。
最终效果：无论 .right 中是 1 行还是多段
，.left 的红色背景都会严格匹配其高度，视觉上形成完整的左右分区，符合“内容驱动高度”的现代布局逻辑。