CSS Flex - 我有一個項目列表可以需要使他們水平滾動與溢出隱藏

Question

我有一個div內的3項。

這個容器需要100％的小部件和水平滾動條。

所以就像一個旋轉木馬。

.wrapper { 
 
    display: flex; 
 
    flex: 1 1 0; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
} 
 

 
.content { 
 
    display: flex; 
 
    width: 500px; 
 
} 
 

 
.item { 
 
    height: 200px; 
 
    width: 100px; 
 
    margin-right: 10px; 
 
}

<div class='wrapper'> 
 
    <div class='content'> 
 
    <div class='item'></div> 
 

 
    <div class='item'></div> 
 

 
    <div class='item'></div> 
 
    </div> 
 
</div>

結果：我想買的東西去與水平滾動條。

目前上面的代碼打破了我的柔性佈局。 我可以做到這一點很容易沒有彎曲，但我正在尋找一個靈活的解決方案。

Answer 1

一個彈性項目的flex-shrink默認爲1，它允許它縮小，因爲你的item也沒有任何內容保持它們在一定的寬度，他們會。

將flex-shrink: 0加到item的規則，他們不會。

順便說一句，因爲flex: 1 1 0;集上wrapper，併成爲一個「靈活的項目」屬性，將只適用於wrapper如果它的父也有display: flex。

---

更新

如果使content顯示inline-flex，你避免它的溢出，作爲內嵌元素，其含量的增長。

棧片斷

.wrapper { 
 
    display: flex; 
 
    flex: 1 1 0; 
 
    overflow-x: scroll; 
 
    overflow-y: hidden; 
 
} 
 

 
.content { 
 
    display: inline-flex; 
 
    border: 2px dotted black; 
 
} 
 

 
.item { 
 
    height: 160px; 
 
    width: 250px; 
 
    flex-shrink: 0; 
 
    margin-right: 10px; 
 
    background: red; 
 
}

<div class='wrapper'> 
 
    <div class='content'> 
 
    <div class='item'></div> 
 

 
    <div class='item'></div> 
 

 
    <div class='item'></div> 
 
    </div> 
 
</div>