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

请参阅此Plunker中页面的冻结DOM状态。在Safari和MS Edge中滚动内容呈现不同的滚动内容的嵌套Flexbox UI

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

我看到最新的Safari浏览器是什么：

禁用风格高度后：10px的; 从.heatmap-multiple-variable-container

渲染的Safari浏览器的内容是：

通知如何第三内容DIV，这是滚动一路下来，不存在的所有内容（的选择所有行）就像在Chrome中一样。另外包含的div的绘图方法不可见。

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

有关如何修改Flexbox布局以针对所有三种浏览器以相同方式显示菜单的任何想法？我真的被卡住了，所以你可以给我的任何指针都表示赞赏。

来源

2017-04-19 amergin

在Edge中，容纳滚动列（'.pl-container'）的容器溢出了其父容器。这就是为什么列表中最后的项目在滚动中不可见的原因。也许你在某个地方有一些顶部/底部边距，但我不确定。要查看我在说什么，请在'.pl-container'上将'height：100％'更改为'height：92％'。我只在Edge中测试过。（[修改后的演示]（http://plnkr.co/edit/xyKF2ePPE3gsH1IyMzod?p=preview））... –

但是这会弄乱Chrome中的高度。您应该尝试提供一个更简单的问题示例。 –

首先，无论你在哪里调用“display：flex”你都需要添加一个“display：-webkit-flex”，所以它在safari中工作，其他属性如“flex”，“flex-direction”也需要一个前缀，例如“-webkit-flex：1 1 auto”和“-webkit-flex-direction：column” – SpaceDogCS

好吧，这是一个很难！将此添加到您的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标签添加了默认显示样式，浏览器不知道使用哪种样式，因此标签没有高度且很难调试。

我希望我能帮助你。

来源

2017-04-27 22:39:14

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

回答

相关问题