Is there a way to make a child div take up 100% of its parent div's width?
I'm trying to create a layout with a sidebar and I want the main content area to fill up the remaining space by adjusting its width based on the sidebar
.bodySection {
height: 100%;
width: 100%;
overflow: auto;
}
.sidenav {
top: 0;
bottom: 0;
left: 0;
position: absolute;
overflow: hidden;
z-index: 5;
background: rgb(250, 250, 250);
width: 230px;
padding-top: 55px;
box-shadow: 1px 1px 1px 1px rgba(0.2, 0.2, 0.2, 0.2);
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 15px;
color: #636363;
display: block;
background: rgb(247, 247, 247);
}
.sidenav a:hover {
background: rgb(241, 241, 241);
}
.main {
margin-left: 230px;
background: rgb(187, 187, 187);
/* Same as the width of the sidenav */
padding: 0px;<section class="bodySection">
<div class="sidenav">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
Hello
</div>
</section>The goal is for the "Hello" div to take up 100% of the screen width, even when using JavaScript to hide the sidebar, and maintaining a height of 100%