I am seeking a solution to create a y-axis scrollable block within the left-navbar. The height of this block should occupy all available space within the left-navbar, ensuring that the left-navbar itself remains at 100% of the page height.
The issue arises when the history overflow is not scrollable, causing all history-item elements to be displayed and consequently increasing the height of the left-navbar beyond the page height.
Furthermore, as the page height reduces, the history-overflow should only fill the free space to prevent the left-navbar from exceeding 100% of the page height. How can this be achieved?
Check out the Codepen sandbox example for reference: https://codepen.io/car1ot/pen/zYqLqKB
HTML code:
<div className="left-navbar">
<div className="history">
<label>History</label>
<div className="history-overflow">
<div className="history-item">*...some content here...*</div>
*...more history-item(s) here...*
</div>
</div>
</div>
CSS (scss) code:
div.left-navbar {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 290px;
height: 100%;
padding: 25px 20px;
box-sizing: border-box;
div.history {
display: flex;
flex-direction: column;
div.history-overflow {
margin-top: 8px;
margin-right: -20px;
padding-right: 14px;
overflow-y: scroll;
div.history-item {
display: flex;
align-items: center;
flex-shrink: 0;
padding: 0 16px 0 6px;
height: 40px;
width: 100%;
border-radius: 7px;
margin-bottom: 8px;
box-sizing: border-box;
}
}
}
}