如何让父Div仅匹配单个子元素高度，忽略另一子元素高度？

核心逻辑很直接：绝对定位的元素会脱离正常文档流，父元素计算自身宽高时，只会把处于文档流里的子元素纳入计算范围。按以下步骤实现即可：

• 给需要被忽略的子元素（child1）添加position: absolute样式，它会立刻脱离文档流，父元素完全不会考虑它的尺寸。
• 如果需要让child1相对于父元素定位，给父元素补个position: relative——这步只是用来限定child1的定位基准，不会影响父元素的尺寸计算。
• 父元素保持height: auto和width: auto即可，它会自动适配留在文档流里的child2的尺寸。

修正后的代码示例：

<div style="width: auto; height: auto; position: relative;">
  <!-- 这个子元素脱离文档流，父元素不会计算它的尺寸 -->
  <child1 style="height: 24px; width: 24px; position: absolute; top: 0; left: -30px;"></child1>
  <!-- 父元素自动适配这个子元素的尺寸 -->
  <child2 style="height: 200px; width: 200px;"></child2>
</div>

额外提醒：

• 如果父元素不加position: relative，child1的定位基准会变成最近的带定位属性的祖先元素，没有的话就以视口为基准，根据自己的布局需求调整即可。
• 脱离流的绝对定位元素不会干扰其他文档流元素的布局，child2的位置不会被child1挤歪。

内容的提问来源于stack exchange，提问作者James Joshua Street