最大宽度为我工作。

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

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

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

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

article { width: 0; }

它也有用

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

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

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

最大宽度为我工作。

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

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

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

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

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