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 1 :
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
#red{
border: 2px solid red;
width:300px;
height: 98vh;
display: flex;
flex-direction: column;
overflow: auto;
}
body{
margin: 0;
}
.child{
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>
</div>my code.
Problem :
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?
Comments
Comment posted by edit your question
Please
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.