在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

回答

相關問題