Prevent flex items from overflowing a container

Question

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)?

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>

I had a pretty similar problem with a child table-responsive overflowing the flex item, the solution was to add `min-width: 0;` to the flex item. — Washington Guedes, Aug 07 '19 at 17:41
I could kiss you @WashingtonGuedes your mention of min-width led me to this CSS Tricks article which describes how/why min-width solves the issue https://css-tricks.com/flexbox-truncated-text/ — Josh Dean, Aug 22 '19 at 16:22
@WashingtonGuedes which item do u add this to i can not seem to get this right — Seabizkit, Jul 07 '21 at 19:16

orszaczky · Answer 1 · 2021-06-03T09:39:44.017

217

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

edited Jun 03 '21 at 09:39

answered Mar 18 '21 at 11:11

orszaczky

10,055
8
41
51

20

Yay thanks! Now we need an explanation for this magic. – ZitRo May 04 '21 at 19:24
5

This is truly magic. Other solutions didn't work for me. How's even this even working. – Unicornist May 31 '21 at 16:09
1

It works! @orszaczky what's the magic behind this? – vxn Jun 02 '21 at 11:52
5

added explanation to the answer above ^ – orszaczky Jun 03 '21 at 09:40
1

In other words, befause `display:flex;` results in `min-width:auto;`, then the element cannot shrink below it's requrested width, thus it will never create an overflow within itself. – Yanick Rochon Nov 05 '21 at 16:05
When I get a job, I buy u a coffee – Spankied Nov 09 '21 at 03:43
Just wow. I would have never thought of doing this. Thanks! – Cog Dec 16 '21 at 20:09
Great answer, a life safer! – Antony Ng Jan 12 '22 at 08:15
Please note that in a situation where `flex-direction: column` or `flex-direction: column-reeverse` is specified, the fix would be `min-height: 0`. – Brent Meeusen Mar 25 '22 at 22:19

score 107 · Accepted Answer · edited Dec 15 '20 at 17:21

107

Your flex items have

flex: 0 0 200px; /* <aside> */
flex: 1 0 auto;  /* <article> */

That means:

The <aside> will start at 200px wide.

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.

Otherwise it won't shrink.

To prevent horizontal overflow, you can:

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

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

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>

edited Dec 15 '20 at 17:21

MegaMatt

22,534
37
102
147

answered Mar 26 '16 at 02:52

Oriol

249,902
55
405
483

4

it seems not gonna work if I have `` inside the `
` even wrap the table with `div` and `overflow: auto;`
– vee Jul 05 '17 at 10:04
1

If you are dealing with many flex items overflowing container (instead of text), you should use [flex-wrap](https://developer.mozilla.org/en/docs/Web/CSS/flex-wrap) – Jorjon Jul 07 '17 at 03:19
2

@vee when you have a to deal with the solution is to add min-width: 0 to the flex child containing the table, as explained above by Washington Guedes.
– Istopopoki Feb 12 '20 at 15:47
2

It does not work, it never works, tested on multiple websites. Your solution is fully wrong and should be removed. – Federico Schiocchet Jun 05 '20 at 19:26
4

@vee try setting `flex: 1 1 0; min-width: 0;` on `
` – had the same problem with `` and it helped; see https://dev.to/martyhimmel/quick-tip-to-stop-flexbox-from-overflowing-peb
– Matt Sep 05 '20 at 18:36
I've been using flexbox for years and still find all this incredibly confusing. – MegaMatt Dec 15 '20 at 16:57
In Chrome, it seems this doesn't work. Horizontal scrollbars appear when you shrink the flexbox horizontally, after you pass the "preferred width" of the box, but before flex decides to wrap and put the entire box on another row. This is annoying me radically. I would simply expect flex to rather wrap the box than start putting scrollbars on it, it just feels buggy :) – BjornW Jun 15 '21 at 07:44
Update to my comment above: also same in Safari. I think there is some magic decision that Flexbox uses when deciding to wrap a flex child to the next row or not, that I don't understand. I guess the situation is not exactly the same as in this question about shrinking elements but related. – BjornW Jun 15 '21 at 07:52
Update again... I had misunderstood what flex-basis does I think. I specified it in pixels, as a hint, but it seems FlexBox takes it more seriously and relies more on that than the actual child content width in that case. Reverting it to "auto" allowed the child to avoid overflowing. Was not obvious (to me at least). Leaving my confused comments here if anyone else stumbles on it :) – BjornW Jun 15 '21 at 08:53

score 14 · Answer 3 · answered Apr 05 '18 at 14:47

One easy solution is to use overflow values other than visible to make the text flex basis width reset as expected.

Here with value auto the text wraps as expected and the article content does not overflow main container.
Also, the article flex value must either have a auto basis AND be able to shrink, OR, only grow AND explicit 0 basis

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>

Downvote: bother explain? Running the snipper shows UI expected by OP? — Pandaiolo, Dec 07 '18 at 12:12
This is the correct solution in case you have overflowing content, such as images or text with `white-space: nowrap`. Thanks — Tigran, Mar 29 '19 at 15:06

score 10 · Answer 4 · answered Mar 26 '16 at 02:42

10

Instead of flex: 1 0 auto just use 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>

answered Mar 26 '16 at 02:42

Nenad Vracar

111,264
15
131
153

10

To clarify, `flex: 1` is like `flex: 1 1 0`. – Oriol Mar 26 '16 at 02:56
Awesome, thanks! I think I had the wrong mental modal for what `flex-shrink` is then since I suppose I *do* want it to shrink. Also @Oriol I think `flex: 1` is `flex: 1 1 auto`. – philfreo Mar 26 '16 at 03:25
1

@philfreo No, it is `flex: 1 1 0`. Src: https://www.w3.org/TR/css-flexbox-1/#flex-property – Asons Mar 26 '16 at 08:27
1

Hmm, why does https://developer.mozilla.org/en-US/docs/Web/CSS/flex show `auto` as the initial value for the 3rd param? – philfreo Mar 27 '16 at 17:31
1

Chrome 68 shows 0% as default flex-basis value when using `flex: 1` – Apolo Aug 24 '18 at 09:20
1

@philfreo `auto` is the initial value for `flex-basis`. If you say `flex: 1` you are in fact overriding that initial value to `0`, even though the `0` is implicit. – jbg Nov 26 '19 at 18:53

score 9 · Answer 5 · answered Aug 06 '18 at 21:35

9

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

answered Aug 06 '18 at 21:35

faroukcharkas

195
1
4

score 6 · Answer 6 · answered Jul 05 '19 at 05:57

6

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

answered Jul 05 '19 at 05:57

JeanAlesi

418
3
13

score 1 · Answer 7 · answered Sep 11 '19 at 00:09

1

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.

answered Sep 11 '19 at 00:09

Walf

7,561
2
39
56

score 1 · Answer 8 · answered Mar 09 '20 at 00:58

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.

Prevent flex items from overflowing a container

8 Answers8

Linked