使用CSS時的水平滾動摺疊Flexbox

Question

我有一個div - scrolling-div，當屏幕大小（寬度）變小並且內容溢出時，它應該水平滾動。

添加這要進行滾動通常DIV工作：

overflow-y: hidden; 
overflow-x: scroll; 
white-space: nowrap; 
width: 100%; 

但問題是，我要垂直居中，所以我使用了Flexbox的做到這一點的內容。但是這導致了滾動打破。

HTML：

<div class="container"> 
<div class="inner"> 
    <p> 
    Some other content here dsdfdsf dsfdsfsdf dsfdsf 
    </p> 
    <div class="scrolling-div"> 
    <div class="bucket"> 
     <p> 
     hello 
     </p> 
     <p> 
     yellow 
     </p> 
    </div> <!-- Add more buckets --> 
    </div> 
</div> 
</div> 

CSS：

* { 
    box-sizing: border-box; 
} 

.container { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    height: 400px; 
    text-align: center; 
} 

.scrolling-div { 
    width: 100%; 
    overflow-y:  hidden; 
    overflow-x:  scroll; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; 
} 

.bucket { 
    display: inline-block; 
    width: 66px; 
    border: 1px solid; 
    margin-left: 10px; 
    margin-right: 10px; 
    text-align: center; 
} 

我需要的水平和垂直中心.inner到.container，但我還需要滾動-DIV滾動。我究竟做錯了什麼？

這是上述代碼的fiddle。

Answer 1

工作實施例（ⅰ剛纔添加到overflow:hidden.inner）：

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: 400px; 
 
    text-align: center; 
 
    background-color: red; 
 
} 
 

 
.inner { 
 
    background-color: yellow; 
 
    overflow:hidden; 
 
} 
 

 
.scrolling-div { 
 
    width: 100%; 
 
    overflow-y:  hidden; 
 
    overflow-x:  scroll; 
 
    white-space: nowrap; 
 
    -webkit-overflow-scrolling: touch; 
 
} 
 

 
.bucket { 
 
    display: inline-block; 
 
    width: 66px; 
 
    border: 1px solid; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    text-align: center; 
 
}

<div class="container"> 
 
<div class="inner"> 
 
    <p> 
 
    Some other content here dsdfdsf dsfdsfsdf dsfdsf 
 
    </p> 
 
    <div class="scrolling-div"> 
 
    <div class="bucket"> 
 
     <p> 
 
     hello 
 
     </p> 
 
     <p> 
 
     yellow 
 
     </p> 
 
    </div> 
 
    
 
    <div class="bucket"> 
 
     <p> 
 
     hello 
 
     </p> 
 
     <p> 
 
     yellow 
 
     </p> 
 
    </div> 
 
    
 
    <div class="bucket"> 
 
     <p> 
 
     hello 
 
     </p> 
 
     <p> 
 
     yellow 
 
     </p> 
 
    </div> 
 
    
 
    <div class="bucket"> 
 
     <p> 
 
     hello 
 
     </p> 
 
     <p> 
 
     yellow 
 
     </p> 
 
    </div> 
 
    
 
    <div class="bucket"> 
 
     <p> 
 
     hello 
 
     </p> 
 
     <p> 
 
     yellow 
 
     </p> 
 
    </div> 
 
    
 
    <div class="bucket"> 
 
     <p> 
 
     hello 
 
     </p> 
 
     <p> 
 
     yellow 
 
     </p> 
 
    </div> 
 
    
 
    <div class="bucket"> 
 
     <p> 
 
     hello 
 
     </p> 
 
     <p> 
 
     yellow 
 
     </p> 
 
    </div> 
 
    
 
    <div class="bucket"> 
 
     <p> 
 
     hello 
 
     </p> 
 
     <p> 
 
     yellow 
 
     </p> 
 
    </div> 
 
    
 
    <div class="bucket"> 
 
     <p> 
 
     hello 
 
     </p> 
 
     <p> 
 
     yellow 
 
     </p> 
 
    </div> 
 
    
 
    <div class="bucket"> 
 
     <p> 
 
     hello 
 
     </p> 
 
     <p> 
 
     last yellow 
 
     </p> 
 
    </div> 
 
    
 
    </div> 
 
    
 
    </div> 
 
    
 
    </div>