时间戳

首页 > 解决方案 > `overflow-y: auto` 忽略父母的身高

html - `overflow-y: auto` 忽略父母的身高

问题描述

为什么 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>

我希望“sadfasfsda”在超出父 div 时滚动，而不是“2”。我不明白为什么这里忽略了父 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>

标签： htmlcss

解决方案

仅仅因为你没有在这个特定的 div 上溢出。仅当您固定高度/宽度并且内容出现在元素之外时才会发生溢出。实际上你的内容在里面；因此你没有溢出。

CSS 使用术语溢出来描述一个盒子的内容，该内容 延伸到盒子的一个边缘（即，它的内容边缘、填充边缘、边框边缘或边距边缘）之外。该术语可能被解释为导致此溢出的元素或特征，这些特征占据的非矩形区域，或者更常见地，界定该区域的最小矩形。参考

<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>

推荐阅读