title: How to vertically wrap content with flexbox?
body: <p>I have three divs inside a flexbox container.</p>
  
  <p>I would like the three <code>divs</code> to be displayed as follows:</p>
  
  <pre><code>+-----------------------------------------------+
  |     +-----------------+-----------------+     |
  |     |                 |                 |     |
  |     |                 |                 |     |
  |     +-----------------+-----------------+     |
  |                                               |
  |     +-----------------------------------+     |
  |     |                                   |     |
  |     |                                   |     |
  |     +-----------------------------------+     |
  |                                               |
  +-----------------------------------------------+
  </code></pre>
  
  <p>so the container will have to adapt vertically to its content but only to its content, not more than that.</p>
  
  <p>I am getting big white spaces between the <code>divs</code> and the container is getting the 100% of the <code>height</code> of its parent, though.</p>
  
  <p>I tried without putting <code>height</code> property to the container and setting <code>height: auto;</code> but neither of them worked.</p>
  
  <p>Here is the code I have:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
     box-sizing: border-box;
  }
  
  html,body{
     width: 100%;
     margin: 0;
  }
  
  #container{
   display: flex;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   margin: auto;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   max-width: 450px;
   border: 1px solid;
  }
  
  #div1{
   width: 50%;
   height: 155px;
   background-color: blue;
  }
  
  #div2{
      width: 50%;
      height: 155px;  
      background-color: red;
  }
  
  #div3{
      width: 70%;
      height: 155px;
      background-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="container"&gt;
    &lt;div id="div1"&gt;&lt;/div&gt;
    &lt;div id="div2"&gt;&lt;/div&gt;
    &lt;div id="div3"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Note:</strong> Make it bigger to see the white spaces between the divs.</p>
  
  <p>How can I make the container shrink-wrap the content and not be 100% height of its parent?</p>
  
  <p>Thanks in advance!</p>