css - ul 的背景颜色未扩展为溢出：自动

Question

我有一个ul包含在div给定的特定宽度和高度内，并设置为overflow: auto. 在文本可见的地方，background-color正确填充了该区域：

...但是，当显示滚动区域时，不会background-color扩展到溢出区域：

---

这是CSS：

.list_container {
    height: 145px;
    width: 150px;
    border: 2px solid black;

    /* for horizontal scrollbar: */
    overflow: auto;

    /* to prevent text from wrapping: */
    white-space: nowrap;
}
    #list {
        height: 100%;
        background-color: #EEEEEE;

        /* getting rid of list styling: */
        list-style-type: none;
    }
        /* getting rid of browser list indenting: */
        #list, #list li {
            margin: 0; padding: 0;
        }

...和 ​​HTML：

<div class = "list_container">
    <ul id = "list">
        <li>asdf asdf asdf asdf asdf asdf</li>
        <li>qwerty qwerty qwerty qwerty</li>
        <li>123 123 123 123 123 123 123 123</li>
        <li>abc abc abc abc abc abc abc abc</li>
    <ul>
</div>

Answer 1

background-color在list-container不上添加ul。

.list_container {
    height: 145px;
    width: 150px;
    border: 2px solid black;

    /* for horizontal scrollbar: */
    overflow: auto;

    /* to prevent text from wrapping: */
    white-space: nowrap;
    background-color: #EEEEEE;
}
#list {
    list-style-type: none;
    height: 100%;
}
#list, #list li {
   margin: 0; padding: 0;
}

演示。

问题：

您ul的宽度较短，因此background-color应用于容器 div 的较短部分。但是当你把它background-color放在容器上时，它会填满它的整个宽度。