title: Make the container adjust its width until the text fills the available height
body: <p>I wonder if it is possible, using only css, make the container adjust its width until it reaches the predetermined maximum height. I am attaching a code snippet. I want the whole thing to grow in width, but only until the orange box contains exactly 3 lines of text and the bottom edge is aligned with the gray</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-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Parcel Sandbox&lt;/title&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;style&gt;
        .container {
          display: inline-block;
          background-color: lightblue;
        }
        .flex {
          display: flex;
        }
        .static {
          width: 155px;
          height: 75px;
          background-color: grey;
        }
        .content {
          width: auto;
          background-color: orange;
        }
      &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div class="container"&gt;
        &lt;div class="flex"&gt;
          &lt;div class="static"&gt;
            Some static dimensions
          &lt;/div&gt;
          &lt;div class="middle"&gt;
            &lt;div&gt;Header&lt;/div&gt;
            &lt;div class="content"&gt;
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh
              augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem.
              Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam.
              Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit
              interdum, dui ligula ultricies purus, sed posuere libero dui id
              orci.
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="end"&gt;*&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>