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>