Html 溢出-y：可见在溢出-x：隐藏时不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11520728/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
overflow-y:visible not working when overflow-x:hidden is present
提问by Seppo420
Doesn't work properly in Chrome or Firefox. Is there any workaround to this?
在 Chrome 或 Firefox 中无法正常工作。有什么解决方法吗？
<!DOCTYPE html>
<html>
<head></head>
<body>
<h3>overflow-y:visible</h3>
with overflow-x:hidden
<div style="overflow-x:hidden;overflow-y:visible;width:100px;height:100px; position:relative;background:#666;">
<div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;">
</div>
</div>
without overflow-x:hidden
<div style="overflow-y:visible;width:100px;height:100px;position:relative;background:#666;">
<div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;">
</div>
</div>
</body>
</html>
The real life scenario involves components that absolutely must have overflow-x:hidden, but that will trigger popup-menus that need to be able to break free from the element in y-direction. Should I just position those menus outside their parent components, or is there a better fix?
现实生活中的场景涉及绝对必须有溢出 x:hidden 的组件，但这将触发需要能够在 y 方向上脱离元素的弹出菜单。我应该将这些菜单放在它们的父组件之外，还是有更好的解决方法？
回答by Sprintstar
This likely has to do with the issue addressed here: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
这可能与此处解决的问题有关：CSS overflow-x: visible; 和溢出-y：隐藏；导致滚动条问题
In short, when using visiblefor either overflow-xor overflow-yand something other than visiblefor the other, the visiblevalue is interpreted as auto.
简而言之，当使用visibleforoverflow-x或overflow-y和其他东西而不是visible其他东西时，该visible值被解释为auto。
回答by ScottS
I think you can get what you want with an extra wrapping divthat does the hiding but does not have the position: relativeset (see fiddle):
我认为您可以通过额外的包装获得您想要的东西，该包装div可以隐藏但没有position: relative设置（请参阅小提琴）：
<div style="overflow-y:visible;width:100px;height:100px;position:relative;background:#666;">
<div style="overflow-x:hidden">
ooooooooooooooooooooooooooooooooooooooooooooooo
<div style="top:20px;left:20px; width:420px;height:420px;position:absolute;background:#420;">
</div>
</div>
</div>
