如何使內部div調整其子元素的寬度

Question

我有一個寬度，高度和overflow-x auto的容器div。我想能夠水平滾動內部的元素。裏面我有一個容納所有元素的內部容器。

如果我給內部div一個固定的寬度，在這種情況下3000像素，它的工作原理，但我希望它動態調整其寬度。我怎樣才能做到這一點？

這是我的小提琴。

https://jsfiddle.net/95yb8k1f/

<div class="outer" style="width:100%; height:500px;overflow-x:auto;"> 
    <div class="inner" style="height:100%; width:3000px;"> 
     <div class="item" style="height:100%; width:300px; float:left;"> 
     <div class="item" style="height:100%; width:300px; float:left;"> 
     <div class="item" style="height:100%; width:300px; float:left;"> 
     <div class="item" style="height:100%; width:300px; float:left;"> 
    </div> 
</div> 

Answer 1

您需要在.item

div.outer { 
 
    width:100%; 
 
    height:400px; 
 
    overflow-x:scroll; 
 
    overflow-y: hidden; 
 
} 
 

 
div.inner { 
 
    position:relative; 
 
    height:100%; 
 
    white-space:nowrap; 
 
} 
 

 
div.item { 
 
    width:300px; 
 
    height:100%; 
 
    display: inline-block; 
 
} 
 

 
div.item:nth-child(2n+1){ 
 
    background:blue; 
 
} 
 

 
div.item:nth-child(2n+2){ 
 
    background:green; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    </div> 
 
</div>