嵌套的flexbox UI，其滚动内容在Safari和MS Edge中的呈现方式不同

Question

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

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

我在最新的Safari中看到的内容：

禁用该样式后     身高：10px; 来自.heatmap-multiple-variable-container

渲染的Safari内容为：

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

在Microsoft Edge中，包含绘图方法的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标签添加了默认显示样式，浏览器不知道要使用哪种样式，因此标签没有高度且难以调试。

我希望我能帮助你。