当点击页面并向右拖动时，会显示水平溢出隐藏项目

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的最简单解决方案之一。