你的伸缩项目有

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>

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

最大宽度为我工作。

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

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

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

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

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

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

article { width: 0; }

它也有用