CODEWITHSUNDEEP
htmlcss
asdf
asdf

Reputation: 21

`overflow-y: auto` ignoring parent's height

Why does overflow-y do nothing in the following?

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

I would like the "sadfasfsda" to scroll when it outgrows the parent div, but not the "2". I don't understand why the parent div's height property is being ignored here.

By comparison, this behaves completely differently (but not desirably either):

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

Upvotes: 2

Views: 131

Answers (2)

Temani Afif
Temani Afif

Reputation: 274252

Simply because you don't have overflow on this particular div. Overflow happen only when you fix the height/width and the content appear outside of the element. Actually your content is inside; thus you have no overflow.

CSS uses the term overflow to describe the contents of a box that extend outside one of that box’s edges (i.e., its content edge, padding edge, border edge, or margin edge). The term might be interpreted as elements or features that cause this overflow, the non-rectangular region occupied by these features, or, more commonly, the minimal rectangle that bounds that region.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>

In order to fix this you have to limit the height of the red div.

Here is an example:

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

Upvotes: 1

Zuber
Zuber

Reputation: 3483

you need to set overflow-y: auto to the div in which you have set height: 100px

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

Upvotes: 0

Related Questions