如果要对溢出进行换行:flex-flow:行换行

对于我来说，简单地添加min-width: 0;到溢出的div防止溢出:

article {
  min-width: 0;
}

解释:

flex上下文中的min-width:虽然默认的min-width值是0(零)，但对于flex项目，它是自动的。这可能会使块元素占用比预期更多的空间，从而导致溢出。

Min-width的定义是为了战胜与之竞争的width和max-width，这意味着一旦元素的宽度缩小到隐含的auto宽度以下，Min-width:auto就会起作用，并防止元素缩小。

修复现在很明显:min-width: 0

它告诉浏览器这个元素没有权利占用任何最小宽度，现在它将被正确呈现，只占用可用的宽度。

关于弹性收缩的注意事项:虽然弹性收缩在这里听起来有帮助，但实际上并没有。所描述的问题是关于基于元素内容的元素大小调整，而flex-shrink定义了在同一上下文中相对于其他伸缩元素的收缩。源

我知道这有点晚了，但对我来说，我发现应用弹性基础:0;防止它溢出的元素。

用flex: 1代替flex: 10 auto

main, aside, article { margin: 10px; border: solid 1px #000; border-bottom: 0; height: 50px; } main { display: flex; } aside { flex: 0 0 200px; } article { flex: 1; } <main> <aside>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x </aside> <article>don't let flex item overflow container.... y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y y </article> </main>

它并不适用于每一种情况，因为不是所有的项目都有非比例的最大值，但是在有问题的元素/容器上设置一个好的max-width可以让它回到正轨。

最大宽度为我工作。

aside {
  flex: 0 1 200px;
  max-width: 200px;
}

CSS预处理器的变量可以避免硬编码。

aside {
  $WIDTH: 200px;
  flex: 0 1 $WIDTH;
  max-width: $WIDTH;
}

overflow: hidden也可以，但我最近尝试不使用它，因为它隐藏了弹出式和下拉式的元素。