CSS：弹性盒子横向溢出

Question

如何让flexbox容器的子项不拉伸，但水平溢出呢？这样你就可以通过overflow-x滚动或在右侧截断内容。

我的尝试最终导致了子项被水平拉伸，尽管它们具有固定的宽度。

- Malte

---

你目前尝试了什么？请展示一些代码。 - c69

Answer 1

如果 flex 容器设置了 flex-wrap:no-wrap（默认情况下），那么将其设置为overflow:auto;，并将 flex 子项设置为 flex: 0 0 100%（或者您想要的任何宽度代替100%），就足够了。

section{
  display:flex;
  width:100%;
  overflow:auto;
}

div{
  background-color:chartreuse;
  height:2rem;
  flex: 0 0 100%;
  box-sizing:border-box;
  border:5px solid red;
}

<section>
  <div></div>
  <div></div>
  <div></div>
  <div></div>  
</section>

- Facundo Corradini

---

@TemaniAfif 你说得完全正确，我会记住的。 - Facundo Corradini

哇，非常有趣，为什么它只能与 flex-shrink: 0; 一起使用。花了一些时间才找到你的答案。谢谢！ - Disorder