防止弹性物品溢出容器 [英] Prevent flex items from overflowing a container

问题描述

如何制作我的flex项(在此示例中为article)，其中的flex-grow: 1; 不会使它的flex父级/容器(main)溢出?

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

在此示例中，article只是文本，尽管它可能包含其他元素(table等).

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

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>

推荐答案

您的弹性商品有

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

这意味着:

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

然后它不会增长也不收缩.

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.

否则它不会收缩.

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

To prevent horizontal overflow, you can:

• 使用flex-basis: 0，然后让它们以正数flex-grow增长.
• 如果空间不足，请使用正数flex-shrink使其收缩.

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

为防止垂直溢出，您可以

To prevent vertical overflow, you can

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

• Use min-height instead of height to allow the flex items grow more if necessary
• Use overflow different than visible on the flex items
• Use overflow different than visible on the flex container

例如，

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>

这篇关于防止弹性物品溢出容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！