CSS：flexbox水平溢出[关闭]

Posted 2023-03-10

【中文标题】CSS：flexbox水平溢出[关闭]

【英文标题】：CSS: flexbox horizontal overflow [closed]

【发布时间】：2018-01-13 11:03:58

【问题描述】：

如何让 flexbox 容器的子项不拉伸而是水平溢出？这样您就可以使用overflow-x滚动或剪切右侧的内容。

我的实验以水平拉伸的项目结束，尽管它们具有固定的宽度。

【问题讨论】：

到目前为止你有什么尝试？请显示一些代码。

【参考方案1】：

如果弹性容器有flex-wrap:no-wrap（默认），那么将其设置为overflow:auto;，弹性项目设置为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>

【讨论】：

@TemaniAfif 你完全正确，我会记住这一点。

哇，很有趣，为什么它只适用于flex-shrink: 0;。花了一些时间，直到找到你的答案。谢谢！