如何让带margin的元素填充非flex容器的flex子项？

问题背景 #

在非flex容器的flex子项中，我们想让带margin的子元素完全填充父容器（即该flex子项）。比如示例里的<section>是flex容器<main>的子项，但<section>本身不是flex容器，我们希望<div>能填充<section>，同时保留自身的margin。

通常在普通容器里，用position: absolute可以轻松实现，但在这个场景下直接用却失效了，这是为什么？

示例代码：

<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; */
  /* 为什么这行代码不生效？ */
  background-color: #cfc;
  margin: 10px;
}
</style>

为什么position: absolute在flex子项里失效？ #

绝对定位元素的定位基准是最近的非static定位祖先元素（即position值为relative/absolute/fixed/sticky的元素）。

示例中的<section>是flex子项，但它的position是默认的static，所以当<div>设置position: absolute时，会跳过<section>，直接以更上层的已定位元素（比如<main>或<body>）为基准，自然不会填充<section>。

填充flex子项的通用方法 #

针对这个场景，有两种可靠的解决方案：

方案1：给flex子项设置定位上下文 #

给<section>添加position: relative，让它成为<div>的定位基准，然后启用<div>的绝对定位：

section {
  flex-basis: 100%;
  background-color: #ccc;
  margin: 10px;
  position: relative; /* 添加这行 */
}

div {
  position:absolute; top:0; left:0; right:0; bottom:0;
  background-color: #cfc;
  margin: 10px;
}

此时<div>会以<section>为基准填充整个空间，自身的margin会自动向内收缩，完美贴合需求。

方案2：把flex子项转为flex容器 #

不需要绝对定位，直接把<section>设为flex容器，利用flex布局的拉伸特性：

section {
  flex-basis: 100%;
  background-color: #ccc;
  margin: 10px;
  display: flex; /* 添加这行 */
}

div {
  flex: 1; /* 添加这行 */
  background-color: #cfc;
  margin: 10px;
}

flex子项默认会沿交叉轴拉伸（这里交叉轴是垂直方向），flex:1让<div>占满<section>的所有可用空间，同时margin正常生效，还能兼容动态内容的场景。

让元素填充容器的最通用方法 #

没有绝对万能的方法，但这两种方案覆盖了绝大多数场景：

• 绝对定位法：适合需要脱离文档流的场景，只要给父容器设置position: relative，子元素设置position: absolute; top:0; left:0; right:0; bottom:0;即可，margin会自动生效。
• flex布局法：适合需要保留文档流、支持动态内容的场景，父容器设display:flex，子元素设flex:1（单一子元素），天然支持margin和自适应拉伸。

内容的提问来源于stack exchange，提问作者personal_cloud