Child of position: fixed; won't scroll

Question

I have a sidebar with position: fixed. Inside this sidebar, I have a .list where I want to use overflow: scroll. However, it is not working as I want it to.

HTML

<div id="side">

    Stuff

    <div id="list">
        <div class="item">An item</div>
    </div>

</div>

CSS

#side {
    width: 20%;
    height: 100%;
    background-color: red;
    position: fixed;
}

#list {
    width: 100%;
    background-color: yellow;

    overflow: scroll;
}

.item {
    padding: 10px;
}

JSFiddle of the problem: http://jsfiddle.net/wGE9W/ (the yellow list won't scroll)

Answer 1

Add a height:

#list {
    width: 100%;
    height: 500px;
    background-color: yellow;
    overflow: scroll;
}

Updated fiddle

The height needs to be 100% – Patrick Reck 46 secs ago

Then why can't you just change it to that?

#list {
    width: 100%;
    height: 100%;
    background-color: yellow;
    overflow: scroll;
}

Fiddle