防止弹性项目溢出容器

Question

如何制作我的弹性项目（在本例中为 article ），它具有 flex-grow: 1; 不会 溢出其弹性父/容器（ main ？）

在此示例中 article 只是文本，尽管它可能包含其他元素（ table s 等）。

 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 0 auto;
}

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

原文由 philfreo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你的弹性物品有

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

这意味着：

• <aside> 将从 200px 宽开始。

然后它不会增长也不会缩小。

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

然后，如果有可用空间，它将增长以覆盖它。

否则不会缩水。

为防止水平溢出，您可以：

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

为了防止垂直溢出，您可以

• 使用 min-height 而不是 height 允许弹性项目在必要时增长更多
• 使用 overflow 与弹性项目上可见的不同
• 使用 overflow 与弹性容器上的可见不同

例如，

 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>

原文由 Oriol 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对我来说，只需将 min-width: 0; 添加到溢出的 div 即可防止溢出：

 article {
  min-width: 0;
}

解释：

min-width in a flex context: While the default min-width value is 0 (zero), for flex items it is auto .这会使块元素占用比预期更多的空间，从而导致溢出。

min-width is defined to win against competing width and max-width , meaning as soon as the element’s width would shrink below its implicit auto width, min-width:auto 将启动并防止元素收缩。

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

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

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

原文由 orszaczky 发布，翻译遵循 CC BY-SA 4.0 许可协议