I am currently working on a page layout that consists of two columns - one for navigation and the other for content.
.bg-1{
background-color:orange;
height: 400px;
overflow-y: auto;
}
.bg-2{
background-color: red;
height: 200px
}
.row{
align-items:flex-start;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class='container'>
<div class='row'>
<div class='col-3 bg-1'>
Nav<br/>
Hello<br/>
Hello<br/>
Hello<br/>
I need a scrollbar!<br/>
And only be as tall as my red neighbor!
</div>
<div class='col-9 bg-2'>Content<br/>I can be as tall as I want!</div>
</div>
</div>Currently, I don't mind if the content column (red) increases in height and takes up more space. However, I would like the navigation column to dynamically adjust its height based on the content column's height.
Sometimes, the navigation column also becomes quite long, resulting in users having to scroll past it to see the bottom of the content. I would prefer if the navigation column could adapt to the height of the content column and use a scrollbar for any overflow.
How should I configure my CSS so that the content column can expand as much as necessary within the flex container while the navigation column is limited to the height of the content column and uses a scrollbar for overflow?
I have tried:
Setting a maximum height for the parent container, but it does not limit the navigation column's height
Setting a maximum height for the navigation column, but I cannot find a value that matches the content column's height
Using align-items: flex-start, which prevents the content column from growing, but users still have to scroll past it to reach the bottom of the navigation. I want the focus to be on the content, so the navigation should utilize a scrollbar when it exceeds the content's height.
Thank you!