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

user_4441879 0
Viewed 48521

.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.

responsive-design flexbox css html
5 Answers

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 |
.                  |
user_24231940

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

user_155817010

Thanks to the Gaurav Aggarwal's answer, I've been able to solve the same kind of issue by using the CSS property:

word-break: break-word
user_24683340
Related