Question

我试图通过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/

提前致谢！

Answer 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;
}

IE和Safari中的Flexbox最大高度

1 个答案: