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

Answer 1

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;
}