Flexbox 列在 IE11 中无法正确考虑包装内容答案

【问题标题】：Flexbox column grow not accounting for wrapped content correctly in IE11Flexbox 列在 IE11 中无法正确考虑包装内容
【发布时间】：2020-04-14 02:13:40
【问题描述】：

我使用一个主 flex 容器将页脚强制保留在页面底部，从而构建了一个非常简单的页面。它在主要浏览器中完美运行，除了 IE11。

在 IE 中，虽然它最初可以工作，但如果里面的内容必须换行，则计算出的 flexbox 的大小不会调整。我试过设置最小高度、不同的弹性基础、弹性增长/收缩的变化、前缀。似乎没有任何效果。

在这里，您可以看到它在视口小到足以包裹内容之前正确调整：

当页面较小时会发生以下情况：

我不确定还有什么方法可以让 IE 得到完全支持。

这是我正在测试的 html 代码

<!doctype html>
<html lang="en">
<head>
<style>
html, body {
    height: 100%;
}
</style>
</head>
<body>
<div style="display: flex; flex-direction: column; height: 100%">
    <div style="flex: 1 1 auto">
        <h1>This is a long test message to test the wrapping</h1>
        <h1>This is a long test message to test the wrapping</h1>
        <h1>This is a long test message to test the wrapping</h1>
        <h1>This is a long test message to test the wrapping</h1>
        <h1>This is a long test message to test the wrapping</h1>
        <h1>This is a long test message to test the wrapping</h1>
        <h1>This is a long test message to test the wrapping</h1>
        <h1>This is a long test message to test the wrapping</h1>
        <h1>This is a long test message to test the wrapping</h1>
        <h1>This is a long test message to test the wrapping</h1>
        <h1>This is a long test message to test the wrapping</h1>
        <h1>This is a long test message to test the wrapping</h1>
        <h1>This is a long test message to test the wrapping</h1>
        <h1>This is a long test message to test the wrapping</h1>
    </div>
    <footer style="text-align: right; flex: 0 0 auto; border-top: 1px solid grey;">
        <h4>Footer Content<h4>
    </footer>
</div>
</body>
</html>

【问题讨论】：

看看caniuse.com's listing for the flexbox module IE11 被标记为“由于实现中的错误数量而部分支持”。

标签： html css flexbox

【解决方案1】：

尝试在 html body 和 div 中使用 min-height: 100% 包含 body 和 footer

【讨论】：