防止弹性项目溢出容器

Question

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

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

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>

Answer 1

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

article {
  min-width: 0;
}

说明：

min-width 在 flex 上下文中：虽然默认 min-width 值是 0（零），但对于 flex 项目，它是 auto。这会使块元素占用比预期更多的空间，从而导致溢出。

min-width 的定义是为了战胜竞争的width 和max-width，这意味着一旦元素的宽度缩小到其隐含的自动宽度以下，min-width:auto 就会启动并阻止元素缩小。

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

它告诉浏览器此元素无权占用任何最小宽度，现在它将正确呈现，仅占用可用宽度。

关于flex-shrink 的注释：虽然 flex-shrink 听起来在这里可以提供帮助，但实际上并没有。所描述的问题是关于基于元素内容的元素大小，而 flex-shrink 定义相对于同一上下文中其他 flex 元素的收缩。 Source

Answer 2

你的弹性项目有

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>

Answer 3

max-width 为我工作。

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

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

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

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

Answer 4

它并不适用于所有情况，因为并非所有项目都可以有一个不成比例的最大值，但是在有问题的元素/容器上拍一个好的 ol'max-width 可以让它重新排列。

Answer 5

如果你想要溢出来换行：flex-flow: row wrap

Answer 6

我知道这真的很晚了，但对我来说，我发现将flex-basis: 0; 应用于元素可以防止它溢出。

Answer 7

一个简单的解决方案是使用overflow 以外的visible 值使文本的弹性基础宽度按预期重置。

1. 这里的值为auto，文本按预期换行，并且文章内容不会溢出主容器。

2. 此外，文章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>

Answer 8

不要使用flex: 1 0 auto，而是使用flex: 1

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>