为何overflow-y: auto未生效且忽略父元素高度？附代码示例

嘿，这两个问题其实都围绕着CSS overflow 属性的核心生效逻辑，我来给你掰扯清楚：

问题1：设置overflow-y: auto时为何会忽略父元素的高度？ #

其实不是overflow-y: auto忽略了父元素高度，而是它生效的前提是自身有明确的高度限制。

默认情况下，元素的高度是auto——也就是完全由内部内容撑开。如果你只给子元素加overflow-y: auto，但没给这个子元素设置固定高度/最大高度，它就会跟着内容无限延伸，哪怕父元素有高度限制也没用：父元素的高度约束不会自动传递给子元素，子元素该怎么撑还是怎么撑，自然不会触发滚动条，看起来就像“忽略了父元素高度”。

总结下：overflow 要生效，元素自己得有一个不会被内容撑开的高度——要么是固定值（比如height: 100px），要么是相对于父元素的百分比（这时候父元素必须有明确高度），或者用max-height限制高度上限。

问题2：你提供的代码中overflow-y为何不起作用？ #

先看你的原始代码片段：

<div style="border: 1px solid">1</div>
<div style="border: 1px solid; height:100px">
  <div>2</div>
  <div style="overflow-y: auto">
    sadfasfsda<br>
    sadfasfsda<br>
    <!-- 大量重复文本内容 -->
  </div>
</div>

问题出在那个设置了overflow-y: auto的子div上——它的高度是默认的auto，会被里面的文本完全撑开，哪怕父div有height:100px，这个子div也会直接超出父容器，自己的高度等于内容高度，根本没达到“内容超出容器高度”的触发条件，所以滚动条自然不会出现。

修正方法 #

给这个子div加上高度限制，比如用calc(100% - 25px)（减去上方“2”子div的高度和父容器的内边距，避免父容器出现滚动），或者直接设固定高度，这样内容超出就会触发滚动了：

<div style="border: 1px solid">1</div>
<div style="border: 1px solid; height:100px; padding: 5px; box-sizing: border-box;">
  <div style="margin-bottom: 5px;">2</div>
  <div style="overflow-y: auto; height: calc(100% - 25px);">
    sadfasfsda<br>
    sadfasfsda<br>
    sadfasfsda<br>
    sadfasfsda<br>
    sadfasfsda<br>
    sadfasfsda<br>
    sadfasfsda<br>
    sadfasfsda<br>
    sadfasfsda<br>
    sadfasfsda<br>
    sadfasfsda<br>
    sadfasfsda<br>
    sadfasfsda<br>
    sadfasfsda<br>
  </div>
</div>

这里用calc(100% - 25px)是为了把父容器的内边距和上方子div的margin都计算进去，确保滚动容器刚好填满父容器的剩余空间，不会超出父容器范围。

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