当设置overflow-x为hidden时隐藏垂直滚动条

Question

在这个例子中，我需要使用overflow-x设置为hidden来水平隐藏内容。然而，当我这样做时，它也会自动添加垂直滚动条。我已经阅读过设置overflow-x或overflow-y会将另一个设置为auto，从而强制显示滚动条的文章。有没有办法避免这种情况？

http://jsfiddle.net/kwnQk/

<div class="div1">
    <div class="div2">
    </div>
    <div class="div3">
    </div>
</div>

div.div1 {
    width: 300px;
    height: 300px;
    background-color: #000;
    overflow-y: visible;
    overflow-x: hidden;
}

div.div2 {
    width: 600px;
    height: 80px;
    background-color: #ebebeb;
    margin-top: 20px;
}

div.div3 {
    width: 90px;
    height: 400px;
    margin-left: auto;
    margin-right: auto;
    background-color: #900;
}

- Johann

---

为什么不将 overflow-y: hidden; 设置到 div1 上？ - Krasimir

因为如果div3中的内容垂直增长，它必须被显示。我希望Y轴只增长而不出现滚动条。 - Johann

你想做什么？你想完全隐藏滚动条吗？ - S.Ali

我想让 div2 中的内容水平隐藏，但是让 div3 中的内容在没有任何滚动条的情况下垂直增长。因此，确实不应该显示任何滚动条。 - Johann

Answer 1

移除 div.div1 上的高度，以便 div 可以自动增长高度。

- Vladislav Stanic

Answer 2

如果我理解正确：您想要隐藏所有水平溢出的内容。但是当添加更多内容时，您希望 .div1 在垂直方向上拉伸？

如果是这样，请将 CSS 更改为：

div.div1 {
    width: 300px;
    min-height: 300px;
    background-color: #000;
    overflow-x: hidden;
}

请查看演示。

或者，如果您想保持.div1的固定高度，请将overflow-y更改为auto。请查看有少量内容和有大量内容。

- GreyRoofPigeon

Answer 3

您可以使用以下代码移除 x 和 y 滚动条:

div.div1 {
    width: 300px;
    height: 300px;
    background-color: #000;
    overflow: hidden;
}

- Maxime

Answer 4

给予width :100%可横向显示完整的内容

 div.div1 {
        width: 100%;
        height: 300px;
        background-color: #000;
        overflow-y: visible;
        overflow-x: hidden;
    }

- aizaz

---

不，div1必须限制宽度。 - Johann

Answer 5

我认为这将解决问题：

div.div1 {
    width: 300px;
    height: 300px;
    background-color: #000;
    display: block;
    overflow: hidden;
}

- Ema.H