flex item overflows container due to long word even after using word-wrap

Question

.parent{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:1em;
  background-color:red;
  box-sizing:border-box;
}
.child1{
  background-color:mistyrose;
  padding:1em;
}

.child2{
  background-color:powderblue;
  padding:.5em;
  word-wrap:break-word;
  max-width:500px;
}
.child3{
  background-color:powderblue;
  padding:.5em;
  word-wrap:break-word;

}

<div class="parent">
 <div class="child1">
   question
 </div>
  <div class="child2">
      somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
    
  </div>
</div>

<div class="parent">
  <div class="child1">
    question
  </div>
  <div class="child3">
   somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething
  </div>
</div>

        

The main issue with the above code is ,child3 overflows but if I give a max-width in child2it will not overflow the parent. In both cases I used word-wrap: break-word;

You can check the code here http://jsfiddle.net/vbj10x4k/

I need to know why it happens and how to solve it without using max-width/width to fixed pixel values.I need it to be responsive.

Solution 1

Instead of setting a max-width for your flex item, use a min-width declaration.

By default, if no min-width is set, the item's content min-width is assumed and the flex item's width will never be smaller. By setting a min-width of e.g. 40%, the item will shrink to at most 40% of the flex parent.

.child2, .child3 {
  min-width: 40%;
}

.parent{
  width:100%;
  display:flex;
  flex-direction:row;
  flex-wrap:nowrap;
  padding:1em;
  background-color:red;
  box-sizing:border-box;
}
.child1{
  background-color:mistyrose;
  padding:1em;
}
.child2{
  background-color:powderblue;
  padding:.5em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 40%;
}
.child3{
  background-color:lightyellow;
  padding:.5em;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 40%;
}

<div class="parent">
  <div class="child1">
    question
  </div>
  <div class="child2">
   somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

  </div>
  <div class="child3">
    Works well with long URLs: <a href="#"> https://thisisadamnlongurlcontainingneitherhyphensoradditionalperiods.com</a>
  </div>
</div>

See the code snippet above or the external demo: http://jsfiddle.net/vbj10x4k/5/

Solution 2

Instead of word-wrap:break-word use word-break:break-all

CSS

.child1{
  background-color:mistyrose;
  padding:1em;
  word-break:break-all;
}
.child2{
  background-color:powderblue;
  padding:.5em;
  max-width:500px;
  word-break:break-all;
}
.child3{
  background-color:powderblue;
  padding:.5em;
  word-break:break-all;

}

here is the working fiddle link http://jsfiddle.net/yudi/vbj10x4k/3/

Solution 3

I am using a combination like this and it works for me on Chrome, Safari, and Firefox.

.myOverflowableText {
  word-break: break-word; /* Chrome, Safari */
  overflow-wrap: anywhere; /* Firefox */
}

This site says word-break is supported on Chrome & Safari https://caniuse.com/#feat=word-break.

But I found that Firefox's solution should be overflow-wrap: anywhere on this site: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap

I'm not sure about IE yet... Maybe word-wrap: break-word; works on IE?

My goal is this:

Hello this is some |
text. I am writing |
some text.         |
Especially long    |
words go to the    |
next line like     |
this. This is a    |
veryveryveryveryve |
ryveryverylongword |
.                  |

Solution 4

Adding min-w-0 via tailwind fixed this for me.

View more solutions

Comments

[Paul]

This solution will even break the word "question" in child1 elements which is probably not intended. And you are still using a fixed max-width which doesn't go well with a responsive design.

[Paul]

I didn't say it doesn't work, it's just too much. Just take a look at the demo and the .child1 elements. The word "question" is split into lines for each character. I just assume this is not intended. Also, .child2 still has a maximum width set which will break your layout in devices with screen sizes below that value.

[Gaurav Aggarwal]

because word wrap works when there is spaces between words of there is no space between words you should use word break

[Drew]

Out of all solutions I've seen, such as setting min-width: 0, this is the only one that worked for me. Thanks

[adriaan]

You can also set it to something very small like min-width: 1%; on the element with word-wrap: break-word; and it works.

[Niko]

Thanks, I've been looking for the solution for a while. But I don't get why min-width keeps the inbox item from exceeding the container size...

[DisgruntledGoat]

Just a quick note: the word-wrap property has been replaced by overflow-wrap in modern browsers. (I've updated the answer to use both properties.) See caniuse.com/#search=overflow-wrap

[stackers]

word-break: break-word; is what most people actually want. it will break words only when they're too long. otherwise it breaks them no matter what.

[Paul]

Yes, it works of course (just like adriaan's 1%). The issue with very small values is that in some cases the flex child will actually become that small and will not be readable at all. By setting a reasonable min-width, this can be avoided.

[Nat Riddle]

While this helps, this answer is platform-specific. As this question neither references nor is tagged with Tailwind, the OP is most likely not using it. min-w-0 is just an abstraction for the CSS min-width: 0px;.

[bastinald]

Well anyone who sees my answer who is using Tailwind can utilize this information. This came up in the top search result of Google for flex box break word when I was looking for a solution. This happens in other threads as well, for example I was looking up MySQL column types for latitude/longitude and someone posted a Laravel migration, which helped me since I was using Laravel anyways. Just because this question is platform specific doesn't mean it won't help people who may not be using the specific platform it applies to.