Bagaimana kita boleh membuat elemen margin mengisi item Flexbox yang bukan Flexbox itu sendiri?

Elemen (walaupun elemen bersarang dengan jidar) boleh mengisi bekasnya dengan mudah menggunakan position:absolute - jika ia bukan di dalam projek Flexbox. Mengapa ini tidak berfungsi untuk elemen dalam projek Flexbox?

<main>
  <nav>NAV</nav>
  <section>
    <div>DIV</div>
  </section>
</main>


<style>

html, body {
  position:absolute; top:0; left:0; right:0; bottom:0;
  margin: 0;
}

main {
  position:absolute; top:0; left:0; right:0; bottom:0;
  display: flex;
}

nav {
  flex-basis: 250px;
  background-color: #eee;
}

section {
  flex-basis: 100%;
  background-color: #ccc;
  margin: 10px;
}

div {
  /* position:absolute; top:0; left:0; right:0; bottom:0; */
  /* why doesn't the above line work? */

  background-color: #cfc;
  margin: 10px;
}

</style>

Terdapat banyak soalan serupa seperti ini dan soalan ini yang sebenarnya tidak sesuai untuk item di dalam kotak flex atau item dengan jidar. Terdapat banyak penyelesaian kes khas, seperti align-self:stretch、height:100% 和 box-sizing:border-box 在本例中不起作用，因为嵌套的 margin atau fakta bahawa Flexbox sendiri tidak bersarang. Masalah terus timbul dengan penggodam satu kali ini...

Jadi apakah cara umum untuk mengisi projek Flexbox? position:absolute Apa masalahnya di sini? Apakah cara paling umum untuk mempunyai elemen mengisi bekasnya?