html - CSS Flex - 我有一个元素列表可能需要使它们水平滚动并 overflow hidden

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 也不会没有任何内容使它们保持一定的宽度，它们会。

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

顺便说一句，由于 flex: 1 1 0; 设置在 wrapper 上，并且作为“flex item”属性，将仅适用于 wrapper 如果它的父级也有 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>