When this code below has display: block the margins collapse, which is what i want but when I set display: flex then the margins don't collapse but I would like them to. I've tried fiddling around but I'm not sure how to make them collapse again.
.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>
