How to set height of two columns to the height of the smaller one

Question

I have two columns, as illustrated by this pen. I'm looking for a CSS-only solution (flexbox allowed, obviously) to set the height of the left column to the height of the right column (which is the smaller one), so that it gets its own scrollbar. Is there a way to achieve this? Here's the code from the pen…

HTML:

<div class="container">
  <ul class="list">
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>

  <div class="content">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti ipsa nihil quisquam obcaecati labore exercitationem, suscipit placeat. Aut soluta odit fuga vel sed est. Quod quisquam impedit libero. Laboriosam, magni!</p>
  </div>
</div>

(S)CSS:

.container {
  display: flex;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.list {
  flex: 1;
  overflow-y: auto;
}

.content {
  flex: 4;
}

Answer 1

This seems to work fine:

1. wrap .list in a wrapper (say .list-outer)
2. apply styles of .list to .list-outer instead
3. set height of .list to 0