ul的背景颜色没有扩展到溢出：auto

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

Demo.

问题：

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