html - 隐藏overflow-x时隐藏垂直滚动条

Question

在这个例子中，我需要水平隐藏内容，溢出-x 设置为隐藏。但是，当我这样做时，它也会自动添加垂直滚动条。我已经阅读了在哪里设置溢出-x 或溢出-y 将另一个设置为自动，从而强制滚动条显示。有没有解决的办法？

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;
}

Answer 1

您可以使用以下命令删除 x & y 滚动条：

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

Answer 2

删除 div.div1 上的高度，以便 div 可以增加高度。

Answer 3

如果我理解正确：你想隐藏所有水平溢出的东西。但是您想.div1在添加更多内容时垂直拉伸？

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

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

检查演示。

或者，如果您想保持.div1固定高度，请更改overflow-y为auto. 检查小内容和长内容。

Answer 4

我认为这将解决问题：

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

Answer 5

Givewidth :100%横向显示全部内容

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