6

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

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

到块级元素就足够了，但是由于此处记录的一些 CSS 实现怪癖，这实际上不起作用。最终发生的是溢出-y 的计算值变为自动，而溢出-x 保持隐藏。

还有其他方法可以完成我想要的行为吗？

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

4

1 回答 1

7

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

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

例如：

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

以及以下标记：

.outer {   
    overflow-y: visible;
}

.middle{
    overflow-x: hidden;
}

似乎完成了这项工作。

这里有一个小例子。

于 2012-05-09T19:08:35.137 回答