I'm working on designing a simple layout that looks like this:
https://i.stack.imgur.com/oCzyV.png
Currently, I have the following HTML structure with some variations in class names and additional markup within each element:
<div class="siteContainer">
<div class="sidebar">
<div class="topGreenStrip">
</div>
<div class="sidebarContainer">
<div class="sidebarInnerContainer">
<div class="brownSection">
</div>
<div class="purpleSection">
</div>
<div class="pinkSection">
</div>
<div class="redSection">
</div>
</div>
<div class="rightOrangeStrip">
</div>
</div>
</div>
<div class="lightPurpleContent">
</div>
</div>
Here's the initial CSS for the above markup:
.sidebar {
bottom: 0;
display: flex;
flex-direction: column;
left: 0;
position: fixed;
top: 0;
width: 300px;
}
.topGreenStrip {
height: 5px;
justify-self: flex-start;
}
.sidebarContainer {
flex-grow: 1;
justify-self: stretch;
}
The challenge I'm facing is maintaining 100% screen height while also stretching elements horizontally. The aim is to have the sidebar take up the full height of the screen excluding the green top strip. The large pink section should fill any remaining space after the brown, purple, and red sections.
I've managed to accomplish this without the orange bar by using justify-self: flex-start;, justify-self: stretch;, and justify-self: flex-end;. However, adding the orange bar complicates things.
The orange bar contains dynamic content, making it impossible to set a fixed width. The brown, purple, pink, and red sections should dynamically adjust their widths based on the orange bar (using flex-grow: 1;).
How can I achieve a layout where all elements within the sidebar stretch both vertically and horizontally to 100%? Is this achievable solely with flexbox or would I need to resort to positioned/floated elements?
I apologize for the vague description, but despite multiple attempts, I'm stuck. Any guidance would be greatly appreciated. Thank you.