如何更改CSS弹性框列的宽度？

Question

I have a menu div that fills 100% of its container height, and beside it, to the right, are the header , body and footer sections.

I managed to do this with the CSS flex property . However, I want to change the amount of width the "menu" div takes out of the container, as in, making it 10% width of container's width , and make the rest divs fill what's left (even if the "menu" div is hidden at a later time).

JS Fiddle of what I have right now: https://jsfiddle.net/jf29vr0x/3/

 .container { display: flex; flex-flow: column wrap; width: 75%; height: 500px; position: relative; margin: 0 auto; } .menu { flex: 0 0 100%; background: lightblue; } .header { flex: 0 0 10%; background: lightgray; } .body { flex: 0 0 80%; background: purple; } .footer { flex: 0 0 10%; background: lightgreen; } 

 <div class="container"> <div class="menu"> Menu </div> <div class="header"> Header </div> <div class="body"> Body </div> <div class="footer"> Footer </div> </div> 

I found that if I set the width explicitly on the "menu" class, it resizes it, but the rest of the boxes don't fill the space left, unless I also explicitly state their width to 100%. However, doing this, makes the container overflow, and because the container is aligned to the center, it looks off.

I could also set the width to 90% (on header, footer body) and 10% on the menu, but the menu is sometimes set to display: none; , so when it disappears, the other layout parts are only going to be 90% of container's width.

Is there any way of doing this with only flex-box properties? I don't understand very well what flex-shrink and flex-grow are about, but I think they only affect (in this case) the height?

Thank you.

Answer 1

You have to add a wrapper around the right column, and then only specify flex-basis on the .menu element.

 .container { display: flex; width: 75%; height: 500px; position: relative; margin: 0 auto; height: 500px; overflow: hidden; } .right-col { flex-flow: column wrap; flex-grow: 1; height: 100%; display: flex; } .menu { flex-basis: 10%; background: lightblue; } .header { flex: 0 0 10%; background: lightgray; } .body { flex: 0 0 80%; background: purple; } .footer { flex: 0 0 10%; background: lightgreen; } 

 <div class="container"> <div class="menu">Menu</div> <div class="right-col"> <div class="header">Header</div> <div class="body">Body</div> <div class="footer">Footer</div> </div> </div> 

Fiddle: https://jsfiddle.net/jf29vr0x/11/

Now when the menu is hidden, the right column expands the full amount.