Prevent flex items from overflowing a container

user_137067 0
Viewed 201856

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

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>

flexbox css
8 Answers

For me simply adding min-width: 0; to the overflowing div prevented the overflow:

article {
  min-width: 0;
}

Explanation:

min-width in a flex context: While the default min-width value is 0 (zero), for flex items it is auto. This can make block elements take up much more space than desired, resulting in overflow.

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 will kick in and keep the element from shrinking.

The fix is obvious now: min-width: 0

It tells the browser that this element has no right to take up any minimum width, and now it will be rendered properly, taking up only as much width as is available.

A note about flex-shrink: While flex-shrink sounds like it could help here, it does not. The described issue is about element-sizing based on the element's content, while flex-shrink defines shrinkage relative to other flex elements in the same context. Source

user_30096390

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

user_84196340

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

user_17242850

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

user_3150240

max-width works for me.

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

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

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

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

user_48181230
Related