在 Safari 和 MS Edge 中呈现不同滚动内容的嵌套 flexbox UI答案

【问题标题】：Nested flexbox UI with scrolling content rendered differently in Safari and in MS Edge在 Safari 和 MS Edge 中呈现不同滚动内容的嵌套 flexbox UI
【发布时间】：2017-09-16 01:55:08
【问题描述】：

在Plunker 中查看页面的冻结 DOM 状态。

代码应该代表一个具有四个选项卡的模式，其中第三个选项卡内容是打开的。应该看起来像下图（在最新的 Chrome 中渲染）：三个并排的 div 包含溢出的内容，并且 div 是可滚动的。在底部有一个包含 绘图方法 文本和一个按钮的 div。在 Firefox 中也可以看到相同的视图。

我在最新的 Safari 中看到的：

禁用样式后高度：10px；来自.heatmap-multiple-variable-container

呈现的 Safari 内容是：

请注意，向下滚动的第三个内容 div 不会像在 Chrome 中那样显示其所有内容（全选行）。包含 绘图方法 的 div 也是不可见的。

在 Microsoft Edge 中，包含 绘图方法 的 div 是可见的，但存在与 Safari 中相同的滚动问题。

关于如何修改 Flexbox 布局以在所有三个浏览器中以相同方式显示菜单的任何想法？我真的被卡住了，所以你可以给我的任何指示都非常感谢。

【问题讨论】：

在 Edge 中，包含滚动列的容器 (.pl-container) 正在溢出其父容器。这就是为什么列表中的最后一项在滚动时不可见。也许您在某处有一些顶部/底部边距，但我不确定。要了解我在说什么，请将.pl-container 上的height: 100% 更改为height: 92%。我只在 Edge 中测试过。 (revised demo) ...
但这会弄乱 Chrome 中的高度。您应该尝试提供一个更简单的问题示例。
首先，在任何你调用“display:flex”的地方你都需要添加一个“display:-webkit-flex”，这样它就可以在safari中工作，其他属性比如“flex”，“flex-方向”也需要前缀，例如“-webkit-flex: 1 1 auto”和“-webkit-flex-direction: column”
您还需要添加其他 hack，这样您就不会发现错误 "display:flex; display:-webkit-box; display:-webkit-flex; display: -ms-flexbox ;"

标签： css flexbox

【解决方案1】：

好吧，这很难！将此添加到您的 CSS 中，它应该可以工作。（在 Safari 中测试）

body .multiple-variable-selection-columns-container {
    height: calc(100% - 66px);
}

body .modal-menu .tab-content {
    height: calc(100% - 57px);
}

body .modal-wide .modal-dialog .modal-content .modal-body {
    height: calc(100% - 110px);
}

ng-include {
    display: block;
}

您已将height: 100%; 添加到具有自身高度的相邻元素的元素。你一定要清理你的标记，但上面的 CSS 暂时应该可以工作。

我添加了body 以获得更强大的选择器来覆盖您的代码。我还为ng-include标签添加了默认显示样式，浏览器不知道该使用哪种样式，因此标签没有高度，难以调试。

希望能帮到你。

【讨论】：