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     x000D   x000D  main  aside  article   x000D    margin  10px  x000D    border  solid 1px  000  x000D    border-bottom  0  x000D    height  50px  x000D    x000D  main   x000D    display  flex  x000D    x000D  aside   x000D    flex  0 0 200px  x000D    x000D  article   x000D    flex  1 0 auto  x000D    x000D   lt main gt  x000D     lt aside gt x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x  lt  aside gt  x000D     lt article gt 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  lt  article gt  x000D   lt  main gt  x000D   x000D   x000D

User · Answer

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 · Answer

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    x000D   x000D  main  aside  article   x000D    margin  10px  x000D    border  solid 1px  000  x000D    border-bottom  0  x000D    height  50px  x000D    overflow  auto     1  overflow not  visible     x000D    x000D  main   x000D    display  flex  x000D    x000D  aside   x000D    flex  0 0 200px  x000D    x000D  article   x000D    flex  1 1 auto     2  Allow auto width content to shrink    x000D       flex  1 0 0     Or  explicit 0 width basis that grows    x000D    x000D   lt main gt  x000D     lt aside gt x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x  lt  aside gt  x000D     lt article gt 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  lt  article gt  x000D   lt  main gt  x000D   x000D   x000D

User · Answer

Your flex items have flex  0 0 200px      lt aside gt     flex  1 0 auto       lt article gt       That means   The  lt aside gt  will start at 200px wide  Then it won t grow nor shrink   The  lt article gt  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   x000D   x000D  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      x000D   lt main gt     lt aside gt x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x  lt  aside gt     lt article gt 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  lt  article gt   lt  main gt  x000D   x000D   x000D

User · Answer

Instead of flex  1 0 auto just use flex  1   x000D   x000D  main  aside  article   x000D    margin  10px  x000D    border  solid 1px  000  x000D    border-bottom  0  x000D    height  50px  x000D    x000D  main   x000D    display  flex  x000D    x000D  aside   x000D    flex  0 0 200px  x000D    x000D  article   x000D    flex  1  x000D    x000D   lt main gt  x000D     lt aside gt x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x  lt  aside gt  x000D     lt article gt 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  lt  article gt  x000D   lt  main gt  x000D   x000D   x000D

User · Answer

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 · Answer

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

User · Answer

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

[css] Prevent flex items from overflowing a container

Examples related to css

Examples related to flexbox