Переполнение внутри флекс-контейнера

Есть задача: внутри растянутого флекс-контейнера есть элементы разного размера. Нужно, чтобы, если размеры выходят за пределы контейнера, у элементов включался скролл.

Вот пример кода. Здесь красным выделен общий контейнер, внутри него другие блоки, в том числе контейнер main, в котором 2 блока: один слишком большой (Block1), а другой нормальный (Block2). Сейчас слишком большой блок Block1 растягивает контейнер main, хотя вроде как не должен этого делать.

Мои варианты решения (есть в коде, но закомментированы):

• можно для контейнера main поставить overflow: hidden;, тогда все сразу работает, как надо (если честно, не знаю, почему именно), но такой вариант не подходит, так как нужно показывать элементы изнутри блоков поверх всего.

• добавить опять же для контейнера main высоту (в коде 1px). Я такие хаки периодически вижу, но мне не нравится, что это хак.

Есть ли еще варианты получить нужное?

* {
  outline: 1px solid dodgerblue;
}

.content {
  outline: 4px solid tomato;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.main {
/*   overflow: hidden; */
/*   height: 1px; */
  flex-grow: 1;
  display: flex;
  gap: 50px;
  background-color: #ccc;
}

.block {  
  width: 200px;
  overflow: auto;
  background-color: #eee;
}

<div class='content'>
  <header class='header'>Header</header>
  <main class='main'>
    <span>Main</span>
    <div class='block'>
      <h2>Block1</h2>
      <h2>Block1</h2>
      <h2>Block1</h2>
      <h2>Block1</h2>
      <h2>Block1</h2>
      <h2>Block1</h2>
    </div>
    <div class='block'>
      <h2>Block2</h2>
    </div>
  </main>
  <footer class='footer'>Footer</footer>
</div>