Question

为什么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>
        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>
<div style="border: 1px solid">3</div>

我想要＆＃34; sadfasfsda＆＃34;当它超出父div时滚动，而不是＆＃34; 2＆＃34;。我不明白为什么父div的高度属性在这里被忽略了。

相比之下，这种行为完全不同（但不是理想的）：

<div style="border: 1px solid">1</div>
<div style="border: 1px solid; height:100px">
    <div>2</div>
    <div style="overflow-y: auto; height:100%">
        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>
        sadfasfsda<br>
        sadfasfsda<br>
    </div>
</div>
<div style="border: 1px solid">3</div>

Answer 1

只是因为你没有溢出这个特殊的div。仅当您修复高度/宽度并且内容显示在元素外部时才会发生溢出。实际上你的内容在里面;因此你没有溢出。

CSS使用术语溢出来描述框的内容 延伸到该框的边缘之外（即其内容边缘，填充边，边框边或边缘边）。这个词可能是被解释为导致这种溢出的元素或特征，这些特征占据的非矩形区域，或者更常见的是，限制该区域的最小矩形。^ref

<div style="border: 1px solid">1</div>
<!-- This one is having an overflow -->
<div style="border: 1px solid; height:100px;border:1px solid green">
    <div>2</div>
    <!-- This one is NOT having an overflow -->
    <div style="overflow-y: auto;border:1px solid red">
        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>
        sadfasfsda<br>
        sadfasfsda<br>
    </div>
</div>
<div style="border: 1px solid">3</div>

为了解决这个问题，你必须限制红色div的高度。

以下是一个例子：

.green {
  display:flex;
  flex-direction:column;
}

<div style="border: 1px solid">1</div>
<div class="green" style="border: 1px solid; height:100px;border:1px solid green">
    <div>2</div>
    <div class="red" style="overflow-y: auto;border:1px solid red">
        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>
        sadfasfsda<br>
        sadfasfsda<br>
    </div>
</div>
<div style="border: 1px solid">3</div>

Answer 2

您需要将overflow-y: auto设置为已设置height: 100px

的div

<div style="border: 1px solid">1</div>
<div style="border: 1px solid; height:100px; overflow-y: auto;">
    <div>2</div>
    <div style="overflow-y: auto;">
        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>
        sadfasfsda<br>
        sadfasfsda<br>
    </div>
</div>
<div style="border: 1px solid">3</div>

`overflow-y：auto`忽略父亲的身高

2 个答案: