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>

结果：我希望这些物品用滚动条水平进行。

当前上述代码打破了我的flex布局。我可以很容易地做到这一点，而没有Flex，但我正在寻找flex解决方案。

Answer 1

flex项目的 flex-shrink默认为 1，允许其收缩，并且由于您的 item s也没有任何内容，使它们保持在一定宽度上。/p>

将flex-shrink: 0添加到item的规则中，它们不会。

btw，因为flex: 1 1 0;在wrapper上设置了CC_6，并且是" Flex Item"属性，仅如果其父属于display: flex。

---

更新

如果您使content显示inline-flex，则避免它的溢出，因为 inline 元素随其内容而生长。

堆栈片段

.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>