css - UL の背景色がオーバーフローに拡張されない:auto

Question

特定の幅と高さの中 に がul含まれており、 に設定されています。テキストが表示されている場合、は領域を正しく埋めています: divoverflow: autobackground-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、コンテナに置くと、幅全体がいっぱいになります。