當點擊頁面並向右拖動時，會顯示水平溢出隱藏項目

Question

我在頁面內容的任一側顯示2個圖形。當瀏覽器/頁面寬度變窄時，這些項目會從屏幕上裁剪掉，以便爲內容留出更多空間。這主要是

.page { 
    height: 100%; 
    min-height: 100%; 
    overflow-x: hidden; 
    overflow-y: auto; 
    min-width: 960px; 
} 

這一切工作正常，但我對.page DIV其中開口body標籤後環繞的所有內容，併爲下一個元素的min-width集。我剛剛意識到，當瀏覽器寬度低於min-width時，垂直滾動條會從頁面的一側消失。

這裏的問題的CodePen：https://codepen.io/moy/pen/oemBEN

大概就是因爲body現在在視圖，但.page元素保持在它的設置min-width ...有道理。

但是，我首先在.page元素上設置溢出的原因是因爲我在設置body時遇到了一個問題。我認爲我通過這種方式應用代碼解決了一個問題。

如果我提出下面的代碼到body：

overflow-x: hidden; 
overflow-y: auto; 

出現的所有工作，我想它。內容區域的任何一邊都會被裁剪，並且當Mac上的Chrome + FireFox中的內容足夠長時，垂直滾動條仍保留在視圖中。如果我在Safari（Mac）或Windows上的IE中檢查頁面，則邊項目沒有正確裁剪。

如果您向下縮放瀏覽器，然後單擊背景並向右拖動，則可以顯示頁面的裁剪區域，並且看起來很凌亂！

有沒有辦法解決這個問題？或者我需要做的垂直滾動條隱藏？

Answer 1

您可以使用Flex佈局參見：

https://codepen.io/anon/pen/EvrXmG

• 的.container元素開始彎曲佈局。
• .img元素的width和flex-basis設置爲它，不允許增長但收縮，導致「最大寬度」。
• .wrap元素的width和flex-basis設置爲它，不允許縮小但增長，導致「最小寬度」。

如果頁面變大，.img元素保持最大尺寸，但內容獲取所有空閒空間。

如果頁面變小，內容保持最小寬度，圖像元素開始消失。

此解決方案對於舊版瀏覽器可能不安全，但是適用於現代瀏覽器Browser compatibility的最簡單解決方案之一。