How to arrange three flex div side by side

Question

I have three divs in content div, When browser resizing

• blue and red div must have their fixed width
• green div must resize to left space

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 green div, In some browsers red panel not showing

I also tried float: left and

    display: -webkit-flex;
    display: flex;

but not working correctly. How to do this?

Answer 1

Use flex-grow. Set it to 0 for the blue and red container, and something big for the 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 very good cheat sheet can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Also, don't forget the other properties like display: flex;and justify-content: space-between. It's perfectly explained in the above link.

Note, however, that you don't have to use flexbox. you can achieve the same with float, which makes it compatible with older browsers (To do so, just use display: block; and add float: left to the blue div and float: right; to the red one.)

Answer 2

You can use the flex shorthand property, which defines the flexible behavior of an item:

.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>