title: Stretching items in a flexbox with a max-height
body: <p>I have a div that has multiple items that I'm trying to display in a row. I want each item to grow to fit the available height. Though for one of the items, I want to set a max-height. Once the max-height is reached, I want it to be centered.</p>
  <p>Here's a visualization of the desired behavior -</p>
  <p><a href="https://i.stack.imgur.com/mh0tl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mh0tl.png" alt="enter image description here" /></a></p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;parent&quot;&gt;
    &lt;div ...&gt;Item 1&lt;/div&gt;
    &lt;div ...&gt;Item 2&lt;/div&gt;
    &lt;div class=&quot;item3&quot;&gt;Item 3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.parent {
    display: flex;
    flex-direction: row;
    align-items: stretch;
  }
  
  .item3 {
    max-height: 90px;
  }
  </code></pre>
  <p>This works as long as the parent container's height is 90px or less. Once the height exceeds 90px, Item 3 becomes top-aligned.</p>
  <p>If I set <code>align-items: center</code> on <code>.parent</code>, that has the undesired effect of Item 3 &quot;shrinking&quot; to fit its content - that is, I still want it to grow to 90px when there's space.</p>
  <p>The only &quot;fixed&quot; size I have is that <code>Item 3</code> should not exceed 90px. All other heights are dynamic.</p>
  <p>How would I go about doing this?</p>
  <p><strong>Edit:</strong>
  Clarification on heights being dynamic: The parent div's height is not set, so it grows to fit its &quot;tallest&quot; child.</p>