css - 显示设置为 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

标签： cssflexboxmargin