CODEWITHSUNDEEP
csshtml-listsoverflowbackground-color
Ian Campbell
Ian Campbell

Reputation: 2748

Background-color of a ul not expanding to overflow:auto


I have a ul contained within a div given a specific width and height, and set to overflow: auto. Where the text is visible, the background-color is filling the area correctly:

enter image description here


...however, when the scrolled-area is shown, the background-color does not expand to the overflow area:

enter image description here

Here is the 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;
        }


...and the 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>

Upvotes: 0

Views: 1170

Answers (1)

Mohammad Areeb Siddiqui
Mohammad Areeb Siddiqui

Reputation: 10179

Add the background-color on the list-container not on the 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.

The problem:

Your ul has a shorter width so the background-color is applied on the shorter part of the container div. But when you put the background-color on the container it fills whole of it's width.

Upvotes: 2

Related Questions