CSS顯示：表格單元格寬度100％溢出-x展開

Question

我有這兩個列布局，使用display：table和display：table-cell，並且我想在第二列中放置一個帶水平滾動的div，但是表格會自動擴展，滾動頁面會轉到整個頁面，而不是div。

HTML

<div class="wrapper"> 
    <div id="one"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis finibus metus. Suspendisse commodo rutrum sapien, eu faucibus metus. Nunc elementum augue eu aliquet condimentum. 
    </div> 
    <div id="two"> 
     <div id="horizontal"> 
      <img src="https://dl.dropbox.com/u/1218282/slideshow/1.jpg" /> 
      <img src="https://dl.dropbox.com/u/1218282/slideshow/2.jpg" /> 
      <img src="https://dl.dropbox.com/u/1218282/slideshow/3.jpg" /> 
      <img src="https://dl.dropbox.com/u/1218282/slideshow/4.jpg" /> 
     </div>   
    </div>   
</div> 

CSS

.wrapper { 
    display: table; 
    table-layout: fixed; 
} 
#one { 
    display: table-cell; 
    background-color: gray; 
    width: 200px; 
} 
#two { 
    display: table-cell; 
    width: 100%; 
} 
#horizontal { 
    width: 100%; 
    overflow-x: scroll; 
    white-space: nowrap; 
} 
#horizontal img { 
    max-width: 200px; 
} 

這裏是的jsfiddle： http://jsfiddle.net/cUCvY/2597/

在這個例子中，我想有水平滾動與圖像的DIV活躍裏面，而不是在頁面上。

Answer 1

希望我理解正確的話：

.wrapper { 
    display: table; 
    table-layout: fixed; 
    width:100% 
} 
#one { 
    display: table-cell; 
    background-color: gray; 
    width: 200px; 
} 
#two { 
} 
#horizontal { 

    overflow-x: scroll; 
    white-space: nowrap; 
} 
#horizontal img { 
    max-width: 200px; 
} 
} 

@media screen and (max-width: 400px) { 
    #one { 
    float: none; 
    margin-right:0; 
    width:auto; 
    border:0; 
    border-bottom:2px solid #000;  
    } 
} 

http://jsfiddle.net/cUCvY/2600/