Adapt parent div height to child div height in flexbox
<p>I would like to adapt the parent div height to children height in CSS only.</p>

<p>In my code, both columns have same height.</p>

<p>I would like column 2 to have a smaller height as it contains less divs to show.</p>

<p>Let me show you on an example:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#mainPane {
  display: flex;
  background-color: blue;
}
.column {
  width: 250px;
  background-color: gray;
  margin: 5px 15px 5px 15px;
  display: inline-block;
}
.news {
  background-color: white;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="mainPane"&gt;

  &lt;div class="column"&gt;
    &lt;div class="colHeader"&gt;Col1&lt;/div&gt;
    &lt;div class="news"&gt;Line1&lt;/div&gt;
    &lt;div class="news"&gt;Line2&lt;/div&gt;
    &lt;div class="colFooter"&gt;Footer&lt;/div&gt;
  &lt;/div&gt;

  &lt;div class="column"&gt;
    &lt;div class="colHeader"&gt;Col2&lt;/div&gt;
    &lt;div class="colFooter"&gt;Footer&lt;/div&gt;
  &lt;/div&gt;

&lt;/section&gt;</code></pre>
</div>
</div>
</p>