Solution 1 :

For the the container to not resize, you need to add a limit to how big it can be. You need to go to the container’s CSS and write this:

max-height: 50px;

(50px is an example)

Solution 2 :

Give your div a max-height: 100vh so that it is never more than 100% of the view port height.

Solution 3 :

Look at

    border: 2px solid red;
    height: 98vh;
    display: flex;
    flex-direction: column;
    overflow: auto;
    margin: 0;
    padding: 10px;
    background: linear-gradient(to right,yellow,orange,red);
    box-sizing: content-box;
    margin: 3px;
    font-size: 1.2em;
<div id="red">

    <div class="child">child no.1</div>
    <div class="child">child no.2</div>
    <div class="child">child no.3</div>
    <div class="child">child no.4</div>
    <div class="child">child no.5</div>
  <div class="child">child no.6</div>
    <div class="child">child no.7</div>
    <div class="child">child no.8</div>
    <div class="child">child no.9</div>
  <div class="child">child no.10</div>
    <div class="child">child no.11</div>
    <div class="child">child no.12</div>
    <div class="child">child no.13</div>
    <div class="child">child no.14</div>
    <div class="child">child no.15</div>

my code.

Problem :

enter image description here

The top app bar has a dynamic height (it is undefined when trying to get the offsetHeight property using javascript), and below the bar is a div containing one div on the left (green border) and another div on the right (contains another div with red border). As the div with the red border grows in child elements, it continues to grow in height (it also increases browser vh) instead of following “overscroll: auto”. How can I emualate a fixed height on the right hand side div so it starts to clip and scroll instead of grow in height?


Comment posted by edit your question


Comment posted by deekeh

Give your

Comment posted by skylineg

What if the height needs to be dynamic? I want it to always fit to the viewport height – top navigation bar height. I tried doing that via javascript but the offset height for the top bar returns null

Comment posted by skylineg

When I do this, as the right hand size div gains more children, that div’s height starts to expand beyond view port height which I am trying to prevent.