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

问题描述

如何制作具有 flex-grow: 1; not 的弹性项目(在本例中为 article)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 只是文本，虽然它可能包含其他元素(tables 等).

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; /* <aside> */
flex: 1 0 auto;  /* <article> */ 

这意味着:

• 将从 200px 开始.

那么它就不会增长也不会缩小.

Then it won't grow nor shrink.

将从内容给定的宽度开始.

The <article> 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 与弹性项目上可见的不同
• 使用 overflow 不同于在 flex 容器上可见

• 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屋！