Question

我在div中有3个项目。

这个容器需要是带有水平滚动条的100％小部件。

所以就像一个旋转木马。

＆＃13;

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

＆＃13;

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

＆＃13;

结果：我想让项目与滚动条保持水平。

目前上面的代码打破了我的flex布局。我可以轻松地完成这项工作而无需弯曲，但我正在寻找灵活的解决方案。

Answer 1

灵活项目的flex-shrink默认为1，允许缩小，因为您的item也没有任何内容使其保持一定的宽度，他们会。

将flex-shrink: 0添加到item的规则中，但不会。{/ p>

顺便说一句，因为在flex: 1 1 0;上设置wrapper并且是“弹性项目”属性，只有wrapper如果其父级也有display: flex content 1}}。

更新

如果您使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; }，则可以避免其溢出，因为内联元素会随着内容的增长而增长。

Stack snippet

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

{{1}}

CSS Flex - 我有一个项目列表可以让它们水平滚动，溢出隐藏

1 个答案: