How to organize three flex div side by side

Question

I have three divs in the content div when resizing the browser

• blue and red div should have a fixed width
• the green div should resize to the left.

I also tried this in css

.yellow{ height: 100%; width: 100%; } .red{ height: 100%; width:200px; display:inline-block; background-color: red; } .green{ height: 100%; min-width:400px; display:inline-block; background-color:green; } .blue{ height: 100%; width:400px; display:inline-block; background-color: blue; } 

This code does not resize the green div, in some browsers the red panel does not show

I also tried float: left and

  display: -webkit-flex; display: flex; 

but not working correctly. How to do it?

Answer 1

Use flex-grow . Set it to 0 for blue and red container and something big for green:

 .red{ height: 100%; width:200px; flex-grow: 0; display:inline-block; background-color: red; } .green{ height: 100%; min-width:400px; flex-grow: 1000; display:inline-block; background-color:green; } .blue{ height: 100%; width:400px; flex-grow: 0; display:inline-block; background-color: blue; } 

A very good cheat sheet can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Also, do not forget about other properties, such as display: flex; and justify-content: space-between . This is perfectly explained in the link above.

Please note that you do not need to use flexbox. you can do the same with float , which makes it compatible with older browsers (just use display: block; and add float: left to the blue div and float: right; to red.)

Answer 2

You can use the flex contraction property, which defines the flexible behavior of an element:

 .yellow { display: flex } /* Magic begins */ .red, .green, .blue { min-width: 0 } /* See http://stackoverflow.com/q/26895349/ */ .red { flex: 0 200px } /* Initial width of 200, won't grow, can shrink if necessary */ .green { flex: 400px } /* Initial width of 400, grows to fill available space, can shrink if necessary */ .blue { flex: 0 400px } /* Initial width of 400, won't grow, can shrink if necessary */ 

 html, body { height: 100%; margin: 0; } .yellow { display: flex; height: 100%; } .red, .green, .blue { min-width: 0; } .red { flex: 0 200px; background-color: red; } .green { flex: 400px; background-color:green; } .blue { flex: 0 400px; background-color: blue; } 

 <div class="yellow"> <div class="blue"></div> <div class="green"></div> <div class="red"></div> </div>