如何让父元素高度适应重叠子元素中较高者？Chrome专属方案亦可

嘿，我来帮你搞定这个布局需求！你想要两个子元素重叠放置，父元素自动适配其中较高的那个的高度，同时「more content」始终在父元素下方。之前用Flexbox加绝对定位的方案没成功，问题出在绝对定位的元素会脱离文档流，导致父元素只能计算未脱离流的子元素高度，没法适配更高的那个子元素。

针对最新版Chrome，我推荐用CSS Grid布局，这是最简单且可靠的方案，完全符合你的需求：

实现代码 #

<div class="parent">
  <div class="child-a"></div>
  <div class="child-b"></div>
</div>
<div> more content </div>

.parent {
  display: grid; /* 启用Grid布局 */
}
.parent > div {
  grid-area: 1 / 1; /* 让所有子元素都放在第一行第一列，实现重叠 */
  width: 100%;
}
.child-a {
  background: rgba(255,0,0,0.5);
  height: 50px; /* 动态高度，可替换为任意值 */
}
.child-b {
  background: rgba(0,0,255,0.5);
  height: 100px; /* 动态高度，可替换为任意值 */
}

方案原理 #

• display: grid 让父元素变成网格容器
• grid-area: 1 / 1 把两个子元素都定位到网格的第一行第一列，自然实现重叠效果
• Grid容器会自动计算所有子元素的高度，取最大值作为自身高度，完美解决父元素自适应较高子元素的需求
• 未脱离文档流的布局确保「more content」始终紧跟在父元素下方，不会出现重叠或错位

为什么之前的Flex方案失效？ #

你之前给.child-b设置position: absolute后，它就脱离了Flex布局的文档流，父元素只会根据.child-a的高度来计算自身高度。如果.child-b更高，它会超出父元素范围，而「more content」会紧跟在父元素（高度为50px）的下方，导致视觉上的重叠问题。

这个Grid方案在最新版Chrome中完全支持，而且代码简洁，不需要额外的hack，完美适配动态高度的场景！

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