用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>

你的伸缩项目有

flex: 0 0 200px; /* <aside> */
flex: 1 0 auto;  /* <article> */ 

这意味着:

<aside>的起始宽度为200px。 这样它就不会变大，也不会缩小。 <article>将从内容给定的宽度开始。 然后，如果有可用的空间，它就会增长到覆盖它。 否则它就不会收缩。

为了防止水平溢出，可以:

使用弹性基:0，然后让它们以正的弹性增长。 如果没有足够的空间，使用正伸缩收缩法让它们收缩。

为了防止垂直溢出，可以

使用min-height而不是height来允许伸缩项目在必要时增长更多 在伸缩项目上使用不同于可见的溢出 在伸缩容器上使用不同于可见的溢出

例如,

main, aside, article { margin: 10px; border: solid 1px #000; border-bottom: 0; min-height: 50px; /* min-height instead of height */ } main { display: flex; } aside { flex: 0 1 200px; /* Positive flex-shrink */ } article { flex: 1 1 auto; /* Positive flex-shrink */ } <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>

一种简单的解决方案是使用非可见的溢出值，使文本伸缩基宽按预期重置。

这里的值自动文本包装如预期和文章内容不溢出主容器。 同样，文章的伸缩值必须有一个自动基底并且能够收缩，或者，只增长并且显式为0基底

main, aside, article { margin: 10px; border: solid 1px #000; border-bottom: 0; height: 50px; overflow: auto; /* 1. overflow not `visible` */ } main { display: flex; } aside { flex: 0 0 200px; } article { flex: 1 1 auto; /* 2. Allow auto width content to shrink */ /* flex: 1 0 0; /* Or, explicit 0 width basis that grows */ } <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>

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

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

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

最大宽度为我工作。

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

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

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

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

对于我来说，简单地添加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定义了在同一上下文中相对于其他伸缩元素的收缩。源

article { width: 0; }

它也有用