经过一番认真的搜索，我似乎找到了问题的答案：
来自：http://www.brunildo.org/test/Overflowxy2.html
在Gecko、Safari、Opera中，“visible”与“hidden”结合使用时也会变为“auto”（换句话说：“visible”在与“visible”以外的任何东西组合时会变为“auto”）。Gecko1.8、Safari 3、Opera9.5在这三个版本中的表现相当一致。
W3C规范还指出：
'overflow-x'和'overflow-y'的计算值与它们的指定值相同，但某些与'visible'的组合是不可能的：如果一个被指定为“visible”，另一个被指定为“scroll”或“auto”，则“visible”被设置为“auto”。如果“overflow-y”相同，则“overflow-x”的计算值等于“overflow-x”的计算值;否则它是“overflow-x”和“overflow-y”的计算值对。

简短版本：

如果将visible用于overflow-x或overflow-y，而将visible以外的值用于另一个，则visible值将被解释为auto。

另一种廉价的破解方法，看起来很有效：
style="padding-bottom: 250px; margin-bottom: -250px;"在垂直溢出被截断的元素上，250表示下拉列表所需的像素数，等等。

我最初在使用Cycle JQuery插件时找到了一种CSS方法来绕过这一点。Cycle使用JavaScript将我的幻灯片设置为overflow: hidden，所以当将我的图片设置为width: 100%时，图片看起来会垂直切割，因此我强制它们在!important中可见，为了避免显示幻灯片动画，我将overflow: hidden设置为幻灯片的容器div。希望对你有用。

• • 更新-新解决方案：**
• • 原始问题**-〉http://jsfiddle.net/xMddf/1/（即使我使用overflow-y: visible，它也会变成"自动"，实际上是"滚动"。）

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

• • 新的解决方案**-〉http://jsfiddle.net/xMddf/2/（我发现了一个变通方法，使用 * wrapper * div将overflow-x和overflow-y应用于不同的DOM元素，正如James Khoury建议的将visible和hidden组合为单个DOM元素的问题。）

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

我在尝试构建一个固定位置的侧边栏时遇到了这个问题，该侧边栏同时具有垂直可滚动的内容和嵌套的绝对位置的子项，以便显示在侧边栏边界之外。
我的方法包括分别应用：

• 将overflow: visible属性添加到侧边栏元素
• 侧栏内部 Package 的overflow-y: auto属性

请检查下面的示例或online codepen。

html {
  min-height: 100%;
}
body {
  min-height: 100%;
  background: linear-gradient(to bottom, white, DarkGray 80%);
  margin: 0;
  padding: 0;
}

.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 200px;
  overflow: visible;  /* Just apply overflow-x */
  background-color: DarkOrange;
}

.sidebarWrapper {
  padding: 10px;
  overflow-y: auto;   /* Just apply overflow-y */
  height: 100%;
  width: 100%;
}

.element {
  position: absolute;
  top: 0;
  right: 100%;
  background-color: CornflowerBlue;
  padding: 10px;
  width: 200px;
}

<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<div class="sidebar">
  <div class="sidebarWrapper">
    <div class="element">
      I'm a sidebar child element but I'm able to horizontally overflow its boundaries.
    </div>
    <p>This is a 200px width container with optional vertical scroll.</p>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </div>
</div>

对于我的用例，将overflow-x:visible; overflow-y:clip添加到有溢出的div上似乎可以给予隐藏Y轴上的溢出而不在X轴上提供滚动条的预期效果（我有一个carousel滑块，它加载全尺寸的图像，然后再将其缩小，这些图像在加载时占据了页面高度的75%，因此不需要overflow-y）。
不需要父封装器div，只需要在溢出元素上设置一个固定的height。我意识到这个解决方案可能不适用于所有人，但它肯定会帮助一些人。

现在有一种新的方法来解决这个问题-如果您从需要使overflow-y可见的容器中删除position: relative，您可以使overflow-y可见并隐藏overflow-x，反之亦然（使overflow-x可见并隐藏overflow-y，只需确保具有visible属性的容器没有相对定位）。

更多细节请看CSS技巧的这篇文章--它对我很有效：https://css-tricks.com/popping-hidden-overflow/

我使用了内容+ Package 器的方法...但是我做了一些与前面提到的不同的事情：我确保我的 Package 器的边界没有 * 不 * 与内容的边界 * 在我希望可见的方向 * 对齐。
重要提示：根据position、overflow-*等的各种CSS组合，在一个或另一个浏览器上使用内容+ Package 器、相同边界的方法是很容易的，但我从来没有使用这种方法来使它们全部正确（Edge、Chrome、Safari等）。
但当我遇到这样的事情时：

#hack_wrapper {
    position:absolute; 
    width:100%; 
    height:100%; 
    overflow-x:hidden;
}

#content_wrapper {
    position:absolute; 
    width:100%; 
    height:15%; 
    overflow:visible;
}

<!-- #hack_wrapper div created solely for this purpose --> 
<div id="hack_wrapper">
    <div id="content_wrapper">         
          ... this is an example of some content with far too much horizontal content... like, way, way, way too much content.
    </div>
</div>

......所有浏览器都很高兴。

我也遇到了同样的问题，下面的解决方案起作用了（样式应用于父块）

overflow-y: visible;
overflow-x: clip;

如果你只想看到第一行（但仍然需要溢出），一个小的“hack”工作得很好：
将间距设置得很高，以便确保第二行被推出屏幕-例如：

gap: 10000rem;

这真的是hacky，但工程伟大的东西，如桌面导航与菜单，需要溢出。