爲什麼我的固定div在這種情況下被切斷？

在下面的jsfiddle：http://jsfiddle.net/TVNnT/5/爲什麼我的固定div在這種情況下被切斷？

我想我在右側的列表（藍色），在任何時候都可以看到，所以我給它的位置固定，使得它跟隨瀏覽器的垂直滾動條時用戶向下滾動。此列表中的內容是動態添加的，可以增加到一個大的列表。當頁面上沒有足夠的內容並且列表中有太多項目時，它會被切斷。我如何確保列表中的項目始終可見？我一直在玩CSS一段時間，似乎無法弄清楚這一點。

我的HTML結構：

<body> 
    <div> 
     <div id="mainContent"> 
      main content 
     </div> 
    </div> 
    <div id="list"> 
     <ol> 
      <li>item 1</li> 
      <li>item 2</li> 
      <li>item 3</li> 
      <li>item 4</li> 
     </ol> 
    </div> 
</body>

我的CSS：

body { 
    background: #1b242b; 
    font-family:"lucida grande", tahoma, verdana, arial, sans-serif; 
    font-size: 16px; 
    overflow-y: scroll; 
} 
#mainContent { 
    background-color: pink; 
    position: relative; 
    width: 300px; 
    padding-top: 30px; 
    padding-bottom: 40px; 
    padding-right: 10px; 
    padding-left: 60px; 
} 
#list { 
    background-color: lightblue; 
    position: fixed; 
    overflow: hidden; 
    float: left; 
    width: 150px; 
    min-height: 15px; 
    font-size: 15px; 
    top: 20px; 
    margin-left: 400px; 
    padding-right: 20px; 
}

我缺少什麼？謝謝！

來源

2014-05-15 http203

'的位置是：固定;'和'浮動：左;'在一起沒有意義。如果內容比視口更長，您會如何期望內容自動適應？你可能需要JavaScript。 – j08691

尼克在那裏有最好的CSS選項，但像j08691所說的，你不能在一個小空間裏魔法般地製作大量的文本！ – kthornbloom