title: flexbox height based on content in first column
body: <p>I'm trying to create a "panel" which is divided into two equal width columns, the first one contains text and the second one an image. The image is large and should be scaled down to cover the right side. The height of the panel should follow the amount of text in the left side.</p>
  
  <p><a href="https://i.stack.imgur.com/wZYKw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wZYKw.png" alt="This is what it should look like"></a></p>
  
  <p>This is what it should look like, the image is using <code>object-fit: cover;</code> so that it fills its container completely, <strong>but I don't want to have <code>max-height: 200px;</code> on .panel</strong>.</p>
  
  <p>Is this possible somehow (preferably without using JavaScript)?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.panel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: red;
  
    /* I want this to be flexible based on text in panelText */
    /*max-height: 200px;*/
    
  }
  .panel .panelText {
    padding: 1em;
    flex: 1;
    width: 50%;
    background-color: black;
    color: white;
  }
  .panel .panelImage {
    object-fit: cover;
    width: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="panel"&gt;
    &lt;div class="panelText"&gt;
      &lt;h3&gt;This is a header&lt;/h3&gt;
  
      &lt;ul&gt;
        &lt;li&gt;One one one&lt;/li&gt;
        &lt;li&gt;Two two two&lt;/li&gt;
        &lt;li&gt;Three three three&lt;/li&gt;
        &lt;li&gt;Four four four&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;p&gt;Now we're at the end&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;img class="panelImage" src="https://placebear.com/1000/1000" /&gt;
  
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>