一个演示，为什么没有折叠的底部边距最终出现在父级之外？

Question

.container {
  width: 1024px;
  margin: 0 auto;
  min-height: 300px;
}

header {
  background-color: blueviolet;
  min-height: 100px;
}

main {
  background-color: aqua;
  min-height: 100px;
  width: 1024px;
  /* display: flex; */
  flex-direction: column;
}

.cards {
  background-color: hotpink;
  min-height: 300px;
}

.card1 {
  background-color: yellow;
  min-height: 300px;
  width: 30%
}

.card2 {
  background-color: rgb(15, 143, 136);
  min-height: 300px;
  width: 30%
}

.card3 {
  background-color: rgb(175, 15, 68);
  min-height: 300px;
  width: 30%
}

.herobox1 {
  background-color: rgb(229, 255, 0);
}

.herobox2 {
  background-color: rgb(20, 204, 112);
}

<div class="container">
  <header></header>
  <main>
    <div class="herobox1">
      <h1>Lorem ipsum dolor sit amet.</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta soluta aspernatur similique minima voluptatibus natus, odio asperiores numquam, inventore, dolore dolorem hic ex assumenda. Perferendis at non harum qui quae?</p>
    </div>
    <div class="herobox2">
      <h1>Lorem ipsum dolor sit amet.</h1>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta soluta aspernatur similique minima voluptatibus natus, odio asperiores numquam, inventore, dolore dolorem hic ex assumenda. Perferendis at non harum qui quae?</p>
    </div>
  </main>
  <div class="cards">
    <div class="card1"></div>
    <div class="card2">2</div>
    <div class="card3">3</div>
  </div>
</div>

MDN on margin collapsing：

  

没有内容将父母与后代分开。   如果没有边框，内边距，内联部分，创建的块格式上下文，或没有间隙来将一个块的页边距与一个或多个后代块的页边距分开；或没有边框，内边距，内联内容，高度，最小高度或最大高度来将一个块的边距底部与一个或多个后代块的边距底部分开，然后这些边距就会崩溃。折叠后的边距最终出现在父级之外。

我注意到margin-bottom和margin-top的条件是不同的。

取消对display:flex标签的<main>的注释，为什么在<main>和后续的<div>之间没有“折叠余量最终落在父代之外”的影响？

即使创建了块格式化上下文（<main> flexbox），但根据MDN的说法，这仅会影响margin-top。