（原）
首先有3個div，
第1個，固定大小是200*200（單位為px，下同）
第2個，不固定大小，其大小要用第3個div把個撐開，但是這個div必需要有滾動條，
第3個，固定大小與第1個div保持一致200*200
先上代碼再解釋：
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div style="width: 200px;height: 200px; border: 5px solid red; position: relative;overflow: hidden;"> <div id="abc" style="border: 5px solid green;overflow-x: hidden;overflow-y: scroll;position: absolute;"> <div style="width: 200px;height: 200px;border: 5px solid blue;"> 123 <br> 123 <br> <br> 123 <br> 123 <br> <br> 123 <br> 123 <br> 123 <br> 123 <br> <br> 123 <br> <br> </div> </div> </div> </body> </html>
如圖：
第1個div是紅色邊框，第2個是綠色，第3個是藍色。
關鍵樣式是第2個和第3個div上的。
第3個div寬的作用？
因為第2個div沒有寬高，它的寬高都得依賴第3個div的，所以第3個div的寬200作用是為了保持和第1個div寬200一致，
此時的第2個div寬在firefox下為217（217=200+17），200為第3個div寬，17為firefox瀏覽器下滾動條寬（由於以上例圖用了5的邊框描邊，所以寬度可能有所出入，這里暫時忽略）。
第2個div的217的寬度已經超過了第1個div的200，那么此時將第1個div的超出部分隱藏即可讓滾動條不顯示（overflow: hidden）
第3個div的高度為什么要為200呢？
因為第2個div的大小完全受第3個div大小控制，如果不為200是100，結果會是怎樣的呢？
看圖能明白 ，其實這個200是為了控制第3個div與第1個div高度一致用的，作用就是讓滾動條的高度能和最外面第1個div的高度保持一致。