title: Flex-box columns with multiple children
body: <p>I have a question if I can do something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/cFL5S.jpg" alt="Screenshot"></p>
  
  <p>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)</p>
  
  <p><a href="http://jsfiddle.net/7ay2qz7s/1/" rel="nofollow noreferrer">Fiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="row"&gt;
    &lt;div id="wrapper"&gt;
   &lt;div id="x-1"&gt;&lt;/div&gt;
   &lt;div id="x-2"&gt;&lt;/div&gt;
   &lt;div id="x-3"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>