使用Flex布局实现首子项高度较小时的水平对齐与重叠

我来帮你搞定这个布局问题！你遇到的核心卡点有两个：一是flex子项默认会被拉伸到容器高度，导致百分比高度失效；二是需要实现左侧盒子重叠右侧的效果。下面是具体的解决思路和代码示例：

1. 修复百分比高度不生效的问题 #

Flex容器默认的align-items: stretch属性会强制所有子项拉伸至容器的高度，这就是你设置红色盒子百分比高度没反应的根本原因。另外，CSS百分比高度的计算依赖父元素有明确的高度值，所以我们需要做两步调整：

• 给容器#row-1设置一个确定的高度（比如height: 200px，或者用min-height适配内容，根据你的需求来）
• 给左侧红色盒子添加align-self: flex-start（也可以选flex-end或center，看你想要的垂直对齐方式），这样它就不会被强制拉伸，百分比高度就能正常计算了

2. 实现左侧盒子重叠右侧的效果 #

有两种简单的方法可以实现重叠：

方法一：负margin

给左侧红色盒子设置margin-right: -XXpx（XX是你想要重叠的宽度，比如-40px），它就会向右覆盖右侧盒子的对应区域。

方法二：相对定位

给左侧红色盒子添加position: relative; left: XXpx（XX是重叠的距离），同样能达到重叠效果。

完整示例代码 #

<div id="row-1">
  <div class="red-box"></div>
  <div class="blue-box"></div>
</div>

#row-1 {
  display: flex;
  height: 220px; /* 给容器明确高度，让百分比高度有计算基准 */
  /* 如果不想固定高度，也可以让容器由右侧盒子内容撑开，效果一样 */
}

.red-box {
  align-self: flex-start; /* 取消默认的拉伸行为 */
  height: 65%; /* 自定义百分比高度生效了！ */
  width: 180px;
  background-color: #ff4444;
  margin-right: -50px; /* 重叠右侧盒子50px */
  /* 换成相对定位的写法：
  position: relative;
  left: 50px;
  */
}

.blue-box {
  flex: 1; /* 让右侧盒子占满容器剩余宽度 */
  background-color: #4488ff;
}

额外说明 #

如果不想给容器设置固定高度，只要右侧盒子的内容能撑出容器的高度，左侧盒子的百分比高度依然能正常工作，核心还是align-self: flex-start这个属性，它能让左侧盒子摆脱flex的强制拉伸约束。

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