css - 带有滚动内容的嵌套 flexbox UI 在 Safari 和 MS Edge 中呈现不同

Question

在此 Plunker 中查看页面的卡住 DOM 状态.

代码应该代表一个有四个选项卡的模式，其中第三个选项卡内容是打开的。看起来应该类似于下图(在最新的 Chrome 中呈现):三个并排的 div，其中包含溢出的内容，并且 div 是可滚动的。在底部有一个包含绘图方法 文本和一个按钮的 div。在 Firefox 中也可以看到相同的 View 。

我在最新的 Safari 中看到的:

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

呈现的 Safari 内容是:

请注意向下滚动的第三个内容 div 如何不显示其所有内容(全选 行)，就像在 Chrome 中一样。包含 绘图方法 的 div 也不可见。

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

关于如何修改 Flexbox 布局以在所有三种浏览器中以相同方式显示菜单的任何想法？我真的被卡住了，所以您能给我的任何指示都将不胜感激。

Answer 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标签添加了默认显示样式，浏览器不知道使用什么样的样式，所以标签没有高度，很难调试。

希望能帮到你。