Question

任何人都可以向我解释这里发生了什么。我指定overflow-x应该是可见的，我得到水平滚动条。为什么会这样？我错过了什么或者我应该睡觉吗？

HTML

<div id="container">
<p id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit corporis est esse provident assumenda consequatur vel atque minima id veritatis! Totam iure omnis laudantium provident dolorum blanditiis modi voluptatibus nihil.</p>
<p id="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum tempore debitis blanditiis iure aperiam quam vero esse perferendis doloremque eos natus nemo quos mollitia ratione qui laboriosam itaque animi tempora.</p>
</div>

CSS

/* DIFFERENCE BETWEEN WIDTH:AUTO & WIDTH:100% */
* {margin: 0;padding: 0;}
#container {
    overflow-y: hidden;
    overflow-x: visible;
    width: 500px;
    margin: auto;
    background-color: whitesmoke;
}
#one {
    width: auto;
    padding:10px;
    margin: 20px;
    border:10px solid gray;
}
#two {
    width: 100%;
    padding:10px;
    margin: 20px;
    border:10px solid gray;
}

Answer 1

因此，您指定始终显示x轴的滚动条。使用overflow-x: auto仅在需要时显示滚动条。

Answer 2

试试这个，改变第二个＆＃39; p＆＃39;的宽度。标记为自动并更改overflow-x：auto。

#container {
    overflow-y: hidden;
    overflow-x: auto;
    width: 500px;
    margin: auto;
    background-color: green;
}
#one {
    width: auto;
    padding:10px;
    margin: 20px;
    border:10px solid gray;
}
#two {

    width: auto;
    padding:10px;
    margin: 20px;
    border:10px solid gray;
}

请看这里：http://jsfiddle.net/6j5057my/1/

overflow-x属性的奇怪行为

2 个答案: