如何实现元素双向重叠且父容器取子元素最大宽高值？

不用搞浮动+负margin的hack，直接用CSS Grid就能完美实现这个效果，父容器会自动把宽高适配到所有子元素里的最大宽度、最大高度，完全符合需求：

#merger {
  text-align: center;
  background-color: #f2e7e5;
  display: inline-grid; /* 行内网格，保持父容器按内容收缩尺寸 */
}

/* 核心规则：所有子元素放到同一个网格单元格，自动重叠 */
#merger > * {
  grid-row: 1;
  grid-column: 1;
}

/* 需要显示在上层的元素加active类，提升层级即可 */
#merger .active {
  z-index: 1;
}

原有HTML结构不需要做任何修改，直接复用即可：

<div id="merger">
  <div>
    1
  </div>
  <div>
    222
  </div>
  <div>
    3
    <br />
    3
  </div>
  <div>
    444
    <br />
    444
  </div>
</div>

原方案宽度失效的原因 #

之前的浮动方案里，给所有子元素设置了width: 100%，这个百分比宽度是参照父容器宽度计算的，但浮动布局下父容器的初始宽度是由第一个浮动子元素的宽度决定的。后面的子元素虽然靠负margin拉到了和第一个子元素同一行，但如果内容比第一个子元素宽，就会溢出原本的宽度计算逻辑，把父容器撑出多余宽度，没法自动取到所有子元素的最大宽度。
Grid的同单元格层叠逻辑天然解决了这个问题：网格单元格的尺寸计算规则本身就是取所有放置在该单元格内元素的最大宽高，不管移除哪个非最大尺寸的子元素，父容器的宽高都不会变化，和预期的高度适配逻辑完全一致。

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