当显示设置为flex时，边距不会折叠

Question

当下面的代码具有display: block时，边距会折叠，这是我想要的，但是当我设置display: flex时，边距不会合拢，但是我希望它们这样做。我尝试摆弄，但不确定如何使它们再次塌陷。

.root {
  display: flex;
  flex-direction: column;
}

header {
  margin: 1rem 0;
}

<div class="root">
  <header>rob</header>
  <main>
    <div class="main-container">
      <p>tim</p>
    </div>
  </main>
  <footer>tom</footer>
</div>

https://codepen.io/robcalcroft/pen/jKRvEE