如何让Flexbox容器在类浏览器环境中填充所有可用高度？

我在类浏览器环境中工作，需要让容器动态填充所有可用空间。以下是我目前的实现代码：

CSS 代码 #

/* user agent stylesheet */
html {
    display: flex;
    flex-direction: column;
    font-size: 10px;
}
body {
    display: flex;
    flex-direction: column;
    padding: 0px;
    font-size: var(--uxp-body-font-size);
    color: #505050;
}

/* my stylesheet */
body {
   width: 100%;
   height: 100%;
}

.header {
  height: 100px;
  border: 1px solid gray;
}

.content {
   background-color: lightblue;
   height: 100%;
}

HTML 代码 #

<html>
   <body>
      <div class="header">header</div>
      <div class="content">content</div>
   </body>
</html>

如果将html标签的height设为100%，效果勉强可行，但我不确定在当前受控环境中是否允许这么做（编辑补充：我可以设置html的height为100%，且效果勉强生效）。

针对评论“将body设为100vh”的问题分析：

• 未重置body默认margin会直接导致页面溢出
• 使用固定height而非min-height，内容超出时会引发溢出问题
• 未解释问题产生的根本原因
• 缺少让内容容器填充剩余空间的flex-grow属性

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