I have tried searching the forum for a solution to my problem, but haven't found one yet. I am trying to create two "divs" with fixed height and internal scrolling. However, whenever I add text inside one of them, its height increases accordingly. What I really want is for the main "body" to remain constant in size and only allow the content inside the "div" to be scrollable. The desired outcome should look similar to the image linked below, while also being responsive: https://i.sstatic.net/hLrmI.png
Currently, here's my HTML structure:
<div id="bodyapp" class="container-fluid">
<div class="row">
<div class="col-md-9 no-float">
<div class="box content">
Content
</div>
</div>
<div class="col-md no-float">
<div class="box">Navigation</div>
</div>
</div>
</div>
And this is my current CSS:
#bodyapp {
display: table;
width: 100%;
box-sizing: border-box;
height: 80%;
}
#bodyapp .row {
height: 80%;
}
#bodyapp .row .no-float {
display: table-cell;
float: none;
background-color: darkgray;
margin: 7px;
}
Thank you!