Flex-box columns with multiple children

Question

I have a question if I can do something like this:

using flex-boxes and only three divs inside the wrapper (I guess it would be easier to make two columns, one wrapping the first, big div, and another wrapping two other blocks, but I want to try to do it the way I've mentioned before)

Fiddle

#row {
  margin: 0 auto;
  width: 610px;
}
#wrapper {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-content: flex-start;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
}
#x-1,
#x-2,
#x-3 {
  margin: 5px;
  background-color: red;
}
#x-1 {
  height: 250px;
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 1 1 300px;
  -ms-flex: 1 1 300px;
  flex: 1 1 300px;
  -webkit-align-self: stretch;
  -ms-flex-item-align: stretch;
  align-self: stretch;
}
#x-2 {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 1 1 200px;
  -ms-flex: 1 1 200px;
  flex: 1 1 200px;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
#x-3 {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 1 1 200px;
  -ms-flex: 1 1 200px;
  flex: 1 1 200px;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
}
#x-2,
#x-3 {
  height: 50px;
}

<div id="row">
  <div id="wrapper">
	<div id="x-1"></div>
	<div id="x-2"></div>
	<div id="x-3"></div>
  </div>
</div>

Answer 1

Compatibility: IE 11 and all modern browers. Safari requires the -webkit- prefix.

• Give the parent a height along with flex-flow: column wrap. This will cause overlapping children to wrap in columns

• Give the first flex child the same height as the parent, and don't allow it to shrink, with flex: 1 0 <parent height>. This will push its siblings into another column.

• Give the other siblings flex: 1 to evenly distribute the rest of the columns height between them

Example

* {
  padding: 0;
  margin: 0;
}
#wrapper {
  display: flex;
  flex-flow: column wrap;
  height: 200px;
  width: 300px;
  padding: 5px;
  margin: 0 auto;
}
#wrapper > div {
  background-color: red;
}
#x-1 {
  flex: 1 0 100%;
  margin-right: 5px;
}
#x-2 {
  flex: 1;
  margin-bottom: 5px;
}
#x-3 {
  flex: 1;
}

<div id="wrapper">
  <div id="x-1"></div>
  <div id="x-2"></div>
  <div id="x-3"></div>
</div>