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

Question

我试图允许y轴溢出，同时隐藏x轴上的溢出。人们可能会期望添加这些属性：

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

到块级元素就足够了，但是由于一些CSS实现的怪癖如文档here所示，这实际上并不起作用。最终发生的事情是overflow-y的计算值变为auto，而overflow-x保持隐藏状态。

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

只是为了更详细一点，我有一个水平的项目列表，我正在使用自定义按钮滚动浏览。列表的包含元素的宽度远低于列表的宽度。我不希望出现滚动条，因为我使用自己的自定义按钮来浏览列表，因此我需要隐藏overflow-x。在悬停时，我想应用一个变换来扩大元素的大小，但我希望元素能够溢出包含元素的顶部和底部之外，因此需要overflow-y可见。

Answer 1

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

你必须使用两个div，每次溢出一个。

例如：

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

以下标记：

.outer {   
    overflow-y: visible;
}

.middle{
    overflow-x: hidden;
}

似乎可以胜任。

一个小例子here。