css - 位置的孩子：固定；不会滚动

Question

我有一个侧边栏position: fixed。在这个侧边栏中，我有一个.list我想使用的地方overflow: scroll。但是，它没有按我的意愿工作。

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的问题： http: //jsfiddle.net/wGE9W/（黄色list不会滚动）

Answer 1

添加一个height：

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

更新的小提琴

高度需要 100% – Patrick Reck 46 秒前

那你为什么不能把它改成那样呢？

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

小提琴