Overflow-x被overflow-y覆盖
看起来overflow-x和overflow-y的行为并不像我期望的那样。如果我将overflow-x设置为visible，将overflow-y设置为auto，overflow-x将不会表现为可见，而是隐藏。
是我漏掉了什么，还是这很正常？
Here就是一个例子。
HTML：
</html
<body>
<div class='container'>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
<div class='content'>
This is a content
</div>
</div>
</body>
</html>CSS：
.container {
background: rgba(0, 0, 0, 0.1);
width: 200px;
height: 100px;
overflow-y: auto;
overflow-x: visible;
}
.content {
border: 1px solid rgba(255, 255, 255, 0.6);
color: rgba(255, 255, 255, 0.6);
position: relative;
margin-left: -14px;
padding-left: 14px;
}回答 2
Stack Overflow用户
发布于 2012-07-27 17:33:55
编辑:更多细节后由OP：
overflow CSS属性指定是剪切内容、呈现滚动条还是显示块级元素的溢出内容。
将overflow特性的值与其默认值visible不同时，将创建新的块格式上下文。这在技术上是必要的，因为如果一个浮动将与滚动元素相交，它将强制围绕入侵的浮动重新包装可滚动元素的内容。重绕将在每个滚动步骤之后发生，并将导致太慢的滚动体验。请注意，通过以编程方式将scrollTop设置为相关的HTML元素，即使overflow具有隐藏的值，元素也可能需要滚动。
Overflow的值
visible:默认值。内容不会被裁剪，它可能会呈现在内容框之外。
hidden：内容被剪切，不提供滚动条。
scroll:内容被剪切，桌面浏览器使用滚动条，而不管是否有任何内容被剪切。这避免了滚动条在动态环境中出现和消失的任何问题。打印机可能会打印溢出内容。
auto:取决于用户代理。如果内容溢出，像Firefox这样的桌面浏览器会提供滚动条。
补充了更多细节：
来自：http://www.brunildo.org/test/Overflowxy2.html
在壁虎、野生动物园、歌剧中，“visible”与“
”组合时也会变成“auto”(换句话说：“visible”与“visible”以外的任何东西组合时也会变成“auto”)。Gecko 1.8，Safari 3，Opera 9.5在它们之间是相当一致的。
此外，W3C spec还表示：
‘overflow-x’和‘overflow-y’的计算值与它们的指定值相同，只是与‘visible’的某些组合是不可能的:如果其中一个指定为‘visible’，而另一个指定为‘scroll’或‘auto’，则‘visible’将设置为‘auto’。如果‘overflow-y’与‘overflow-x’相同，则‘overflow’的计算值等于‘overflow-x’的计算值；否则是‘overflow-x’和‘overflow-y’的计算值对。
Stack Overflow用户
发布于 2012-07-27 17:38:38
实际上，在您的示例中，overflow-x将充当auto。
有一些overflow-x和overflow-y的组合不能组合，因为它们根本不能工作。您不能让内容在一个方向上在容器内滚动，而在另一个方向上在容器外可见。
https://stackoverflow.com/questions/11685039
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号