考虑：
.overflow {
margin-left: 50px;
width: 100px;
height: 100px;
background: red;
}
.outer {
/*overflow-y: auto; */
width: 100px;
height: 200px;
border: 1px solid blue;
}<div class="outer">
<div class="overflow">
</div>
</div>这将呈现一个红色正方形（.overflow），它水平溢出蓝色矩形（.outer），正如预期的那样。
现在，当我取消注解overflow-y: auto;时，我希望这只会影响垂直溢出，因此我希望红色方块保持水平溢出。
然而，事实并非如此：
.overflow {
margin-left: 50px;
width: 100px;
height: 100px;
background: red;
}
.outer {
overflow-y: auto;
width: 100px;
height: 200px;
border: 1px solid blue;
}<div class="outer">
<div class="overflow">
</div>
</div>看来：
- 设置
overflow-x对此没有影响（取消设置，可见，滚动，隐藏-它们都不起作用）。 - 将
overflow-y设置为unset以外的任何值都会触发此行为
所以我的问题是
1.为什么会这样呢？
1.我怎样才能避免这种情况？即，我怎样才能有overflow-y: auto，同时仍然允许水平溢出。
1条答案
按热度按时间nszi6y051#
当然，我在发布问题后几分钟就找到了答案。
从
overflow-x上的MDN（和overflow-y）计算值：如指定，除非在溢出-x或溢出-y中的一个既不可见也不可裁剪的情况下，分别使用可见/裁剪计算自动/隐藏
因此，如果
overflow-y既不可见也不可剪辑，则overflow-x不可见。将其设置为可见只会将其有效更改为auto我不认为有一个很好的通用解决方案，但在某些情况下，一种有效的方法是为overflow-y引入一个额外的 Package 器div，并使用负边距来允许水平溢出。类似于以下内容：