设置overflow-x：hidden添加一个垂直滚动条
当我指定overflow-x: hidden在水平和垂直溢出的元素上时，除了隐藏水平溢出的内容之外，元素还获得垂直滚动条。 我已经尝试添加overflow-y: visible ，甚至只是overflow: visible ，没有任何效果。
我误解了这些属性呢？ 我认为overflow-x应该不会影响垂直溢出。
这发生在我试过的每个浏览器上。
这是一个演示效果的片段。 我正在使用<pre>标记，因为它们是创build溢出内容的简单方法，但似乎会发生任何标记。
pre { height: 40px; width: 150px; margin-bottom: 50px; /* We need this so they don't overlap. */ } #x-hidden { overflow-x: hidden; } #y-visible { overflow-x: hidden; overflow-y: visible; } #visible { overflow: visible; overflow-x: hidden; }
<pre> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum lorem felis, sit amet sodales nunc gravida eget. Integer mollis quis magna quis vulputate. Cras aliquet convallis efficitur. </pre> <pre id="x-hidden"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum lorem felis, sit amet sodales nunc gravida eget. Integer mollis quis magna quis vulputate. Cras aliquet convallis efficitur. </pre> <pre id="y-visible"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum lorem felis, sit amet sodales nunc gravida eget. Integer mollis quis magna quis vulputate. Cras aliquet convallis efficitur. </pre> <pre id="visible"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum lorem felis, sit amet sodales nunc gravida eget. Integer mollis quis magna quis vulputate. Cras aliquet convallis efficitur. </pre>
W3C规范说：
“overflow-x”和“overflow-y”的计算值与它们的指定值相同，除了某些与“visible”的组合是不可能的：如果一个被指定为“visible”而另一个是“scroll”或'auto'，那么'visible'被设置为'auto'。
但是这并没有提到overflow-x或overflow-y被设置为hidden ，这对我来说意味着这个组合确实是有可能的。
看看这个答案相关的问题： https : //stackoverflow.com/a/6433475/3583023
这解释了为什么
el { overflow-x: hidden; overflow-y: visible; }
呈现为
el { overflow-x: hidden; overflow-y: auto; }
通常呈现相同的
el { overflow-x: hidden; overflow-y: scroll; }
因为在大多数浏览器中， overflow-y的auto值是scroll 。
所以，为了达到这个效果，我们不能使用overflow-x/overflow-y属性。 我已经尝试过clip属性作为潜在的select，但没有运气到目前为止： http : //jsfiddle.net/qvEq5/
首先， 这个小提琴显示你描述的问题。
到目前为止，我不知道如何解决这个问题，但是似乎这个规范提示 ：
“
overflow-x”和“overflow-y”的计算值与它们的指定值相同， 除了某些与“visible”的组合是不可能的 ：如果一个被指定为“visible”而另一个是“scroll”或'auto'，那么'visible'被设置为'auto'。
就在一个小时之前，我有类似的问题，除了当我指定overflow的值为auto时出现的问题。 我没有使用overflow-x或overflow-y ，我只是需要它来完全包含两个浮动在两端的列表。
对我来说有效的是我将overflow的价值改变为hidden 。 试试看 我已经把max-width设置为100% ，而不是指定高度，我只是使用overflow: hidden 。
希望有所帮助。
只要使用overflow：隐藏在大小受限的包装div上。 请原谅我今天的格式化。
<!DOCTYPE html> <html> <head> <style> div.hidden { background-color:#00FF00; width:100px; height:100px; overflow:hidden; } div.overflowing { width:300px; height:200px; } </style> </head> <body> <p>overflow:hidden</p> <div class="hidden"> <div class="overflowing"> You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. You can use the overflow property when you want to have better control of the layout. The default value is visible. </div> </div> </body> </html>
在这里看到它的行动： http : //jsfiddle.net/4PZC9/
试试这个：
height: auto; width: 100px; overflow: hidden;
应该保持在100px宽的元素，并允许它根据其内容垂直扩展（没有滚动条）。
尝试设置你的身高。 要么像100％，要么自动检查这个
的jsfiddle
height: auto;
尝试设置显示属性？ 溢出声明在块级元素上工作！
也许你误解了一些东西，我没有理解这个问题……或者问题不在溢出设置中。
Overflow: auto将只在需要时添加滚动条（内容大于容器）。 Òverflow: visible将添加滚动条。 Òverflow: hidden不会添加滚动条。
我知道你想要隐藏x的内容，所以overflow-x: hidden ，但是从你的问题来看，我不希望垂直滚动条看到垂直溢出的内容。
也许问题是，为容器设置一个固定的高度（或最大高度），内容更大。 删除高度（或最大高度），你会避免垂直滚动条。
或者也许我说，只是不明白什么是所需的效果。
尝试这个，
height: auto; overflow:hidden;
干杯。
读你的问题…我没有看到任何问题…
当我指定overflow-x：hidden; 在一个元素上，它添加了一个垂直滚动条。
如果它的高度溢出（就像你刚刚说的那样），那就很正常了。
我已经尝试添加溢出-y：可见; 甚至只是溢出：可见，没有效果。
那么…这是正常的，因为你告诉它显示一个垂直滚动条，到现在已经是。
正如kuloir所说：X =横向; Y =垂直。
