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

Question

我试图允许y轴溢出,同时隐藏x轴上的溢出.有人可能会期望添加这些属性:

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

块级元素就足够了,但是由于这里记录的一些CSS实现怪癖,这实际上并不起作用.最终发生的事情是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;
}

似乎做了这个工作.

这里有一个小例子.