Question

当我在水平和垂直溢出的元素上指定overflow-x: hidden时，除了隐藏水平溢出的内容之外，元素还会获得一个垂直滚动条。我尝试添加overflow-y: visible，甚至只添加overflow: visible，但效果不佳。

我误解了这些属性的作用吗？我认为overflow-x不应该影响垂直溢出。

这种情况发生在我尝试的每一个浏览器上。

这是一个演示效果的片段。我正在使用<pre>代码，因为它们是创建溢出内容的简单方法，但它似乎与任何代码一起发生。

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 spec说：

'overflow-x'和'overflow-y'的计算值与它们的指定值相同，除了某些与'visible'的组合是不可能的：如果一个指定为'visible'而另一个是'滚动'或'自动'，然后'可见'设置为'自动'。

但是，当overflow-x或overflow-y设置为hidden时，这没有提到这种情况，这对我来说意味着这种组合确实是可能的。

Answer 1

查看相关问题的答案：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;
}

因为auto的{{1}}值在大多数浏览器中都是overflow-y。

因此，为了达到这个效果，我们无法使用scroll属性。我已尝试将overflow-x/overflow-y属性作为潜在的替代方案，但到目前为止没有运气：http://jsfiddle.net/qvEq5/

Answer 2

就在一小时前，我遇到了类似的问题，除了我将overflow的值指定为auto时出现的问题。我没有使用overflow-x或overflow-y，我只是需要它来完全包含我的两个浮动在相反端的列表。

对我有用的是我将overflow的值更改为hidden。试试吧。我已将max-width设置为100%，而不是指定高度，我只使用了overflow: hidden。

希望有所帮助。

Answer 3

首先，this fiddle显示了您描述的问题。

到目前为止，我不知道如何解决这个问题，但它看起来像spec hints to this here：

“overflow-x”和“overflow-y”的计算值与他们的指定值，除了与'可见'的某些组合不可能：如果一个被指定为'visible'而另一个被指定为 '滚动'或'自动'，然后'可见'设置为'自动'。

Answer 4

尝试设定身高。要么像100％，要么自动检查一下

jsfiddle

    height: auto;

Answer 5

尝试一下：

height: auto;
width: 100px;
overflow: hidden;

应将元素保持在100px宽，并允许它根据其内容垂直展开（不使用滚动条）。

Answer 6

只需使用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/

Answer 7

尝试设置显示属性？溢出声明适用于块级元素！

Answer 8

试试这个，

height: auto;
overflow:hidden;

干杯。

Answer 9

也许你误会了什么，我没有解决问题......或者问题不在溢出设置中。

Overflow: auto仅在需要时添加滚动条（内容大于容器）。 Òverflow: visible会添加滚动条。 Òverflow: hidden不会添加滚动条。

我知道您希望隐藏x内容，所以overflow-x: hidden，但从我的问题来看，我觉得不希望垂直滚动条看到垂直溢出的内容。

问题可能是容器的固定高度（或最大高度），内容更大。删除高度（或最大高度），你将避免垂直滚动条。

......或者就像我说的那样，只是不明白什么是预期的效果。

Answer 10

读你的问题......我没有看到任何问题...

我指定overflow-x：hidden;在元素上，它添加了一个垂直滚动条。

如果它的高度溢出（就像你刚才说的那样），那就很正常了。

我尝试过添加overflow-y：visible;甚至只是溢出：可见，无效。

嗯......这是正常的，因为你告诉它显示一个垂直滚动条，已经有了。

正如kuloir所说：X =水平; Y =垂直。

设置overflow-x：hidden会添加一个垂直滚动条

10 个答案: