How to vertically wrap content with flexbox?
<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>