Fixed Sidebar Within Container With Fluid Content - html

Question

I'm trying to achieve a fixed left sidebar with fluid right content within a container.
I've checked out answers that tell me to set a margin-left on the content which is not what I want to do.
The closest I could get was through this answer:
A `position:fixed` sidebar whose width is set in percentage?
<div class="main-container">
<div class="sidebar">
<div class="sidebar-content-container">
<div class="sidebar-content">
<!-- Sidebar content here -->
</div>
</div>
</div>
<div id="content">
<!-- Scrollable Content Here -->
</div>
</div>
This is the CSS
.main-container {
height: 100vh;
max-width: 1366px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 100px;
width: 100%;
position: relative;
.sidebar {
float: left;
width: 20%;
height: 100%;
position: relative;
.sidebar-content-container {
height: 100%;
position: fixed;
.sidebar-content {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
}
}
}
#content {
height: 100%;
width: 80%;
display: inline-block;
float: right;
}
}
The way I have it done right now, once you inspect the sidebar, the width it calculates is not within the main-container but the rest of the viewport. What I'm trying to achieve is to keep the 20% calculation within the main-container without setting a fixed width.
So the yellow part represents the problem for me. Once I set it fixed, it doesn't stay within the parent container. My goal is after I set it to fixed, it stays within the red part.
I know I could do something like sidebar width 100px content margin-left 100px but that's not the objective and do not like any javascript alternatives.
Thoughts?
Thanks!

Answer 1

Your are using width:100% in this div and also padding which increases its width from 100% because padding adds to the width. So for giving the padding within the 100% width you can use property box-sizing:border-box as below:
.main-container {
height: 100vh;
max-width: 1366px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
padding-top: 100px;
width: 100%;
position: relative;
box-sizing:border-box;
}

Answer 2

Well, I guess that's the thing with fixed elements. They kind of have a mind of their own. Once an element is fixed, it doesn't seem to obey the overflow and dimension rule of its parent containers. They take their dimensions (if you are using %) from the browsers width. So I think what you should do is to give the fixed element the same dimension as its immediate container.
<div id="parent-box">
<div id="fixed-elem"></div>
</div>
//css
#parent-box{
position: relative;
width: 40%;
height: 100%;
float: left;
overflow: hidden;
}
#fixed-elem{
position: fixed;
width: 40%;/*this is 40% of the browser width not the container*/
height: 100%;/*this is 100% of the browser height*/
}