html - How to arrange three flex div side by side -

i have 3 divs in content div, when browser resizing

• blue , red div must have fixed width
• green div must resize left space

i tried 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 not resize green div, in browsers red panel not showing

i tried float: left and

    display: -webkit-flex;     display: flex; 

but not working correctly. how this?

use flex-grow. set 0 blue , red container, , big green one:

.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 cheat sheet can found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

also, don't forget other properties display: flex;and justify-content: space-between. it's explained in above link.

note, however, don't have use flexbox. can achieve same float, makes compatible older browsers (to so, use display: block; , add float: left blue div , float: right; red one.)