对于我的用例，添加overflow-x:visible;溢出- Y:剪辑到有溢出的div似乎给了我想要的效果，隐藏溢出在Y轴上，而不是给我一个滚动条在X轴上(我有一个旋转滑块，在加载图像全尺寸之前缩放它们再次下降，这些图像在加载时占据了页面高度的75%，因此不想溢出- Y)。

不需要父包装器div，只需要在溢出元素上设置一个固定的高度。我知道这个方法可能并不适用于所有人，但肯定能帮助到一些人。

另一个廉价的黑客，似乎可以达到目的:

风格= " padding-bottom: 250 px;Margin-bottom: -250px;"在垂直溢出被切断的元素上，250表示你需要的下拉框像素，等等。

如果你只想让第一行可见(但仍然需要溢出)，一个小“hack”非常有效:

将间隙设置得很高，这样你就可以确定第二行被推出屏幕-例如:

gap: 10000rem;

它真的很俗气，但对于需要溢出菜单的桌面导航之类的东西非常有用。

现在有一种新的方法来解决这个问题——如果你从需要overflow-y可见的容器中删除position: relative，你可以让overflow-y可见而overflow-x隐藏，反之亦然(有overflow-x可见和overflow-y隐藏，只是确保具有可见属性的容器不是相对定位的)。

查看这篇文章的CSS技巧更多的细节-它为我工作:https://css-tricks.com/popping-hidden-overflow/

我使用了内容+包装器的方法……但我做了一些与之前提到的不同的事情:我确保我的包装器的边界不在我想要显示的方向上与内容的边界对齐。

重要提示:根据位置、overflow-*等各种CSS组合，在一个浏览器或另一个浏览器上使用内容+包装器、相同边界的方法是很容易的，但我从来没有使用过这种方法来让它们都正确(Edge、Chrome、Safari等)。

但当我有这样的东西:

# hack_wrapper { 位置:绝对的; 宽度:100%; 高度:100%; overflow-x:隐藏; ｝ # content_wrapper { 位置:绝对的; 宽度:100%; 高度:15%; 溢出:可见; ｝ <！——#hack_wrapper专门为此目的创建的div——> < div id = " hack_wrapper " > < div id = " content_wrapper " > ．.． 这是一个有太多横向内容的例子……太多太多太多的内容了。 < / div > < / div >

．.． 所有的浏览器都很满意。

我最初发现了一个CSS方式绕过这个时，使用循环jQuery插件。Cycle使用JavaScript将我的幻灯片设置为overflow: hidden，所以当我将图片设置为width: 100%时，图片看起来会垂直切割，所以我强迫它们可见!important，为了避免显示幻灯片动画，我设置了overflow: hidden到幻灯片的容器div。希望这对你有用。

更新-新的解决方案:

原来的问题-> http://jsfiddle.net/xMddf/1/ (即使我使用overflow-y: visible，它也变成了“auto”和“scroll”。)

#content {
    height: 100px;
    width: 200px;
    overflow-x: hidden;
    overflow-y: visible;
}

新的解决方案-> http://jsfiddle.net/xMddf/2/ (我发现了一种变通方法，使用包装器div对不同的DOM元素应用overflow-x和overflow-y，就像James Khoury在将可见和隐藏结合到单个DOM元素的问题上所建议的那样。)

#wrapper {
    height: 100px;
    overflow-y: visible;
}
#content {
    width: 200px;
    overflow-x: hidden;
}