如何实现父div默认固定高度，子元素高度超出时自动适配子高度

最优实现方案无需编写JavaScript，仅通过修改CSS属性即可满足需求：
你当前给div A设置了固定height: 40px，所以无论子元素高度如何变化，div A都会固定为40px，才会出现内容溢出的问题。只需要将固定高度属性替换为min-height: 40px即可：

• 当所有子元素总高度≤40px时，div A会自动保持40px的基础高度
• 当任意子元素高度超出40px时，div A会自动被内容撑开，高度和最高子元素同步，无需额外逻辑控制

修改后的代码示例：

<div id='A' style="min-height: 40px">
  <div id='B'>
     <div id='C'>
         <div id='D'></div>
     </div>
  </div>
</div>

如果你的子元素存在浮动设置导致高度塌陷，可以额外给div A增加overflow: auto属性，或者使用其他常规清除浮动方案即可。

该方案相比JS动态计算的优势：

• 无额外JS运行开销，性能更高
• 样式响应同步，不会出现JS计算时差导致的样式闪烁问题
• 无需额外适配子元素高度变化的场景，哪怕是后续子元素动态增删也能自动适配

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