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

Question

我在页面内容的任一侧显示2个图形。当浏览器/页面宽度变窄时，这些项目将从屏幕上裁剪下来，以便为内容留出更多空间。这主要是

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

一切正常但我在min-width div上设置了.page，它包含了所有内容，是开始body标记之后的下一个元素。我刚刚意识到，当浏览器宽度低于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元素启动flex布局。
• .img元素设置了width和flex-basis，不允许增长但缩小，导致“最大宽度”。
• .wrap元素设置了width和flex-basis，不允许缩小但增长，导致“最小宽度”。

如果页面变大，.img元素保持最大尺寸，但内容会获得所有可用空间。

如果页面变小，内容将保持最小宽度，图像元素开始消失。

此解决方案可能对旧浏览器不安全，但对于现代浏览器Browser compatibility来说是最简单的解决方案之一。