CSS 防止弹性项目溢出容器

Prevent flex items from overflowing a container

提问by philfreo

How do I make my flex item (articlein this example), which has flex-grow: 1;notto overflow it's flex parent/container (main)?

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

In this example articleis just text, though it might contains other elements (tables, etc).

在这个例子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>

回答by Oriol

Your flex items have

你的弹性项目有

flex: 0 0 200px;
flex: 1 0 auto;

That means:

这意味着：

• The first one will start at 200pxwide.

  Then it won't grow nor shrink.

• The second one will start at the width given by the content.

  Then, if there is available space, it will grow to cover it.

  Otherwise it won't shrink.

• 第一个将200px从宽开始。

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

• 第二个将从内容给定的宽度开始。

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

  否则不会缩水。

To prevent horizontal overflow, you can:

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

• Use flex-basis: 0and then let them grow with a positive flex-grow.
• Use a positive flex-shrinkto let them shrink if there isn't enough space.

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

To prevent vertical overflow, you can

为防止垂直溢出，您可以

• Use min-heightinstead of heightto allow the flex items grow more if necessary
• Use overflowdifferent than visible on the flex items
• Use overflowdifferent than visible on the flex container

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

For example,

例如，

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>

回答by Nenad Vracar

Instead of flex: 1 0 autojust use flex: 1

而不是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>

回答by Pandaiolo

One easy solution is to use overflowvalues other than visibleto make the text flex basis width reset as expected.

一种简单的解决方案是使用除按预期重置文本 flex 基础宽度overflow之外的值visible。

1. Here with value autothe text wraps as expected and the article content does not overflow main container.

2. Also, the article flexvalue must either have a autobasis AND be able to shrink, OR, only grow AND explicit 0basis

1. 这里的 valueauto文本按预期换行，文章内容不会溢出主容器。

2. 此外，文章flex价值必须有一个auto基础并且能够缩小，或者，只能增长 AND 显式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>

回答by faroukcharkas

I know this is really late, but for me, I found that applying flex-basis: 0;to the element prevented it from overflowing.

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

回答by JeanAlesi

If you want the overflow to wrap: flex-flow: row wrap

如果您希望溢出包装： flex-flow: row wrap

回答by Walf

It's not suitable for every situation, because not all items can have a non-proportional maximum, but slapping a good ol' max-widthon the offending element/container can put it back in line.

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

回答by Gurebu Bokofu

max-widthworks for me.

max-width为我工作。

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

Variables of CSS pre-processors allows to avoid hard-coding.

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

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

overflow: hiddenalso works, but I lately I try do not use it because it hides the elements as popups and dropdowns.

overflow: hidden也有效，但我最近尝试不使用它，因为它将元素隐藏为弹出窗口和下拉列表。