在隐藏x轴溢出的同时允许y轴溢出

Question

我正在尝试允许y轴上的溢出，同时隐藏x轴上的溢出。你可以添加以下属性：

.overflow {
  overflow-x: hidden;
  overflow-y: visible;
}

将其转换为块级元素就足够了，但由于一些CSS实现怪癖（如此处所述），这并不真正有效。最终发生的是，overflow-y的计算值变为auto，而overflow-x仍然保持隐藏。

有没有其他方法来实现我想要的行为？

再详细说明一下，我有一个水平列表，我正在使用自定义按钮滚动它。列表的包含元素的宽度远低于列表的宽度。我不希望出现滚动条，因为我正在使用自己的自定义按钮来浏览列表，所以我需要将overflow-x隐藏。在鼠标悬停时，我想应用一个变换来放大元素的大小，但我希望元素能够溢出到包含元素的顶部和底部之外，因此需要overflow-y可见。

- tabdulla

---

太棒了，谢谢你的链接！ - Flimm

Answer 1

如果您不介意添加一些额外的标记，似乎有一个简单的解决方案。

您只需要使用两个div，一个用于每个溢出。

例如：

<div class="outer">
    <div class="middle">
         <!-- your content here -->
    </div>
</div>

以下是标记:

.outer {   
    overflow-y: visible;
}

.middle{
    overflow-x: hidden;
}

看起来能够完成工作。

这里有一个小的例子。

- Py.

---

实际上，这并不起作用。中间 div 的计算 overflow-y 值最终会变成 auto，因此它仍然会剪切溢出部分。 - tabdulla

它在哪个浏览器中剪辑呢？对我来说（至少在我发布的fiddle中），我看到一个60*80的黑色背景。因此，overflow-x被隐藏（只显示了60像素），而overlfow-y是可见的（因此是80像素）。 - Py.

经过进一步测试，我发现如果将中间的溢出移动到外部或将overflow-y的值更改为hidden/scroll，则会产生真正的差异。因此，任何屏幕/进一步的代码示例都将有所帮助 :) - Py.

所以，事实证明你的解决方案是可行的，但不适用于我的transform：scale。我没有想到这个细节会有影响，但显然它确实有。 - tabdulla

你能否接受这个答案或编辑你的问题并提供适当的信息呢？ :) - Py.