Flexbox Layout – Sidebar & Content Fixed With Fluid Backgrounds
At the time of writing this, this is what I currently have built my site on. It’s inspired by Twenty Fifteen’s layout, but in my humble opinion, uses better CSS logic for similar results.
Basically, this layout has a max-width
1,175 px (I’ve set those bounds with red lines in
#goal for reference only, it doesn’t actually contribute), however the sidebar and main content areas are still edge-to-edge flex – and the ratio remains the same.
I’ve never really got into flex box, but it’s amazing. I quickly found
flex-bias and this will keep the boxes in the same ratio, we then house an inner container to relate to our fixed max-width. And, well the code will explain better: