如何让块级元素填充作为flex-item的父元素可用高度？

致关闭投票者：请先阅读问题再判定为重复问题。本问题与你们链接的问题并非同一问题。
我不是询问如何让flex-item填充flex容器，而是询问如何让块级元素填充flex-item。

我用flexbox实现了典型的「粘性页脚」布局（页眉、内容、页脚），其中内容区域会自动扩展，保证页脚始终固定在底部。请运行以下代码片段：

html,
body {
  margin: 0;
}

.layout {
  background: pink;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background: red;
  height: 40px;
}

main {
  background: blue;
  flex: 1;
  position: relative;
}

.content {
  background: yellow;
  height: 100%;
}

footer {
  min-height: 60px;
  background: pink;
}

<!doctype html>
<html>
<body>
  <div class="layout">
    <header>
      HEADER
    </header>
    
    <main>
      <div class="content">
        CONTENT
      </div>
    </main>
    
    <footer>
      FOOTER
    </footer>
  </div>
</body>
</html>

蓝色区域（main）是设置了flex: 1的flex-item，它能正确扩展以确保页脚固定在视口底部。

我希望嵌套的黄色块级div（.content）填充其父元素的100%高度——最终结果中不应看到蓝色区域，需完全被黄色覆盖。

请问我哪里操作有误？

问题原因 #

main作为flex-item，通过flex:1获得了自适应高度，但这个高度是「隐式计算值」，没有被显式定义，导致子元素.content的height:100%找不到有效的参考高度，无法铺满父元素。

解决方法 #

以下三种方法均可实现需求，可根据实际场景选择：

方法一：将main设为flex容器 #

让main成为flex容器，子元素.content通过flex:1自动填充剩余空间：

main {
  background: blue;
  flex: 1;
  position: relative;
  display: flex; /* 添加该行 */
}

.content {
  background: yellow;
  flex: 1; /* 替换原有的height:100% */
}

方法二：给main显式设置高度并兼容flex限制 #

给main添加height:100%，同时加上min-height:0打破flex布局的高度计算限制：

main {
  background: blue;
  flex: 1;
  position: relative;
  height: 100%;
  min-height: 0; /* 解决flex容器min-height导致的高度计算问题 */
}

.content {
  background: yellow;
  height: 100%;
}

方法三：使用绝对定位铺满父元素 #

利用main已设置的position:relative，给.content设置绝对定位：

.content {
  background: yellow;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

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