对我来说，简单地将min-width: 0;添加到溢出的div中就可以防止溢出：

article {
  min-width: 0;
}

• • 说明：**

灵活上下文中的min-width：默认的min-width值为0（零），而对于弹性物料，则为auto。这会使块元素占用比所需空间多得多的空间，从而导致溢出。
min-width被定义为战胜竞争的width和max-width，这意味着一旦元素的宽度缩小到其隐式自动宽度以下，min-width:auto就会起作用并阻止元素缩小。
现在解决办法很明显：min-width: 0
它告诉浏览器该元素无权占用任何最小宽度，现在它将被正确呈现，只占用可用的宽度。
关于flex-shrink的注意事项：虽然flex-shrink听起来似乎在这里有帮助，但实际上没有。所描述的问题是关于基于元素内容的元素大小调整，而flex-shrink定义了相对于同一上下文中其他flex元素的收缩。Source

您的弹性项目具有

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

这意味着：

• <aside>的起始宽度为200px。

它就不会变大也不会变小。

• <article>将从内容给定的宽度开始。

然后，如果有可用的空间，它将增长以覆盖它。
否则它不会缩水。
要防止水平溢出，您可以：

• 使用flex-basis: 0，然后让它们以正flex-grow增长。
• 如果没有足够的空间，请使用正的flex-shrink来缩小它们。

要防止垂直溢出，您可以

• 使用min-height而不是height，以允许灵活项目在必要时增长更多
• 使用不同于Flex项目上可见的overflow
• 使用不同于柔性容器上可见的overflow

例如，
x一个一个一个一个x一个一个二个x

一个简单的解决方案是使用visible以外的overflow值，使文本伸缩基础宽度按预期重置。
1.这里，使用值auto，文本按预期换行，并且文章内容不会溢出主容器。
1.此外，项目flex值必须具有auto基并且能够收缩，或者只能增长并且显式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>

我知道现在说这个有点晚了，但是对我来说，我发现对元素应用flex-basis: 0;可以防止它溢出。

请使用flex: 1代替flex: 1 0 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-flow: row wrap

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

max-width适合我。

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

CSS预处理器的变量允许避免硬编码。

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

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

article { width: 0; }

它也能工作