I am currently working on a code snippet to build a basic website featuring two main sections: a sidebar and the main content:
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: row;
height: 100%;
}
.sidebar {
background-color: #FFF5BA;
width: 200px;
}
.main {
background-color: rgba(248, 248, 248, 1);
flex-grow: 1;
}
Here is the corresponding HTML structure:
<div class="container">
<div class="sidebar">
<div class="main">
</div>
The issue arises when additional content is dynamically added to the main section using JavaScript. Once there is enough content to necessitate scrolling, the sidebar fails to expand accordingly as you scroll down.
Although it would be optimal for the sidebar to remain fixed and scroll along with the page, I have come across information suggesting that combining flexbox with position: fixed may not be viable.
If you require complete details, please refer to the following link: https://codepen.io/wulfenn/pen/LYNRNEv (please excuse any untidy code as I am still in the learning phase)
Your assistance is greatly appreciated!