IE 和 Safari 中的 Flexbox 最大高度答案

【问题标题】：Flexbox max-height in IE and SafariIE 和 Safari 中的 Flexbox 最大高度
【发布时间】：2017-07-06 16:24:19
【问题描述】：

我正在尝试通过 flexbox 在两个静态容器之间获取一个滚动容器。包装这三个 div 的容器的最大高度必须为 90vh。该代码在 Chrome 或 Firefox 中运行良好，但在 IE 或 Safari 中无法运行。我已经测试了一些常见的 flexbox-bug 解决方法，但都没有奏效。

示例代码：

.outer {
    max-height: 90vh;
    width: 400px;
    display: flex;
    flex-direction: column;
}

.body {
    flex: 1 1 auto;
    overflow: auto;
}

<div class="outer">
    <div class="header">header</div>
    <div class="body">a lot of content</div>
    <div class="footer">footer</div>
</div>

见https://jsfiddle.net/rqz2g3kz/

提前致谢！

【问题讨论】：

caniuse.com/#feat=flexbox
尝试添加这条规则body { display: flex; } ...这将修复IE11，在Safari中会发生什么？
@LGSon 非常感谢。这就是解决方案。诀窍是在外部容器周围放置另一个带有 display: flex 的容器。 重要的是，它的 flex-direction 与内部容器相反。 该死的 IE ;)
这里是修复的示例代码：jsfiddle.net/zk5755vg
我建议您自己发布一个答案，将该代码作为堆栈 sn-p

标签： css internet-explorer safari flexbox

【解决方案1】：

感谢@LGSon，我找到了解决方案。

在行为不端的容器周围添加一个具有相反弯曲方向的包装容器会有所帮助。

所以示例的结果代码是这样的：

<div class="outer-wrapper">
    <div class="outer">
        <div class="head">Head</div>
        <div class="body">a lot of content</div>
        <div class="footer">footer</div>
     </div>
</div>

.outer-wrapper {
  display: flex;
  flex-direction: row;
}

.outer {
    max-height: 90vh;
    width: 400px;
    display: flex;
    flex-direction: column;
}

.body {
    flex: 1 1 auto;
    overflow: auto;
}

【讨论】：