I am currently learning CSS and trying out some new things. I am looking to create a page with two side-by-side divs: one for the sidebar and the other for the main content. My goal is to have the sidebar take up 400px of width and allow the content part to fill the remaining space up to a screen size of 950px.
Within the content div, I want to include a scrollable section that can hold 20 items with dimensions of 250px in height and 200px in width.
After implementing this design, I noticed that the content div with the blue border overflows the entire page. Here is a snippet of the CSS and HTML code:
/* CSS Styles */
*{
padding: 0;
margin:0
}
.container {
width:100vw;
height: 100vh;
background-color: black;
padding:20px;
box-sizing: border-box;
display:flex;
overflow: hidden;
}
.sidebar {
width: 400px !important;
height:100%;
border:1px solid red;
box-sizing: border-box;
flex-shrink: 0;
}
.content{
height:100%;
border:1px solid blue;
width:calc(100%);
flex-shrink: 3;
}
.holder{
height:40%;
width:100%;
border:1px solid yellow;
display:flex;
overflow: scroll;
}
.item{
height:250px;
width:200px;
border:1px solid pink;
flex-shrink: 0 ;
}/* HTML Markup */
<div class="container">
<div class="sidebar"></div>
<div class="content">
<div class="holder">
<!-- This will hold around 15 to 20 items -->
<div class="item"></div>
<div class="item"></div>
...
<div class="item"></div>
</div>
</div>
</div>