父div设置max-height与overflow:auto不生效 仅加底部padding才触发滚动

最常见触发原因：父子元素底部外边距合并 #

根据CSS基础盒模型规则，当父元素同时满足以下条件时，会和最后一个子元素发生底部外边距合并（margin collapse）：

• 父元素未设置padding-bottom
• 父元素未设置border-bottom
• 父元素未创建块格式化上下文（BFC）

此时子元素的margin-bottom会溢出到父元素外部，不会被计入父元素的内部内容高度。如果你设置的max-height刚好小于「子元素内容总高度+子元素底部外边距」，溢出的margin不会被判定为父元素内部溢出，所以overflow:auto不会触发，父元素会直接被子元素内容撑开高度。当你给父元素或最后一个子元素添加padding-bottom后，会直接阻断外边距合并规则，子元素总高度被完整计入父元素内部，超过max-height就会正常触发滚动。

其他可能原因 #

• 父元素的max-height使用了百分比单位，但父元素的上级容器没有显式设置固定高度，导致百分比max-height不生效，父元素默认会被子元素完全撑开
• 父元素设置了box-sizing: content-box，你计算max-height时误将padding、border的高度纳入总高度，导致实际max-height大于子元素内容总高度，不会触发滚动

修复方案 #

• 方案1：给父元素添加display: flow-root，创建无副作用的BFC直接阻断外边距合并，不需要额外添加padding
• 方案2：给父元素添加border-bottom: 1px solid transparent，或设置极小值的padding-bottom，同样可以阻断外边距合并
• 方案3：如果是百分比max-height失效的问题，给父元素的上级容器设置显式固定高度，或将父元素的max-height改为px、vh等固定单位

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