我们怎样才能让 margin 元素填充本身不是 Flexbox 的 Flexbox 项目？

一个元素（甚至是带有边距的嵌套元素）可以使用 position:absolute 轻松填充其容器——如果它不在 Flexbox 项目内。为什么这不适用于 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>

有许多类似的问题，例如这个问题和这个问题，实际上并不适用于弹性盒内的项目或带有边距的项目。有很多特殊情况的解决方案，例如 align-self:stretch、height:100% 和 box-sizing:border-box 在本例中不起作用，因为嵌套的 margin 或 Flexbox 本身是这样的事实不嵌套。这些一次性黑客的问题不断出现......

那么填充 Flexbox 项目的通用方法是什么？ position:absolute 这里有什么问题？让元素填充其容器的最通用方法是什么？