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

question


somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething


question

somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

</div>

CSS

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

}


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;

child3

max-width

child2

parent

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.

max-width/width

3 Answers
3

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. 50%, the item will shrink to at most 50% of the flex parent.

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


.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: 50%;
}
.child3{
background-color:powderblue;
padding:.5em;
word-wrap: break-word;
overflow-wrap: break-word;
min-width: 50%;
}


question

somethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomethingsomething

</div>

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

perfect solution .
– Sachin
Mar 22 '16 at 9:51

Awesome, works.
– zakjan
Aug 3 '17 at 7:42

You can also set it to something very small like min-width: 1%; on the element with word-wrap: break-word; and it works.
– adriaan
May 7 at 11:02

min-width: 1%;

word-wrap: break-word;

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...
– Niko
May 25 at 15:53

min-width

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

word-wrap:break-word

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/

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
Mar 22 '16 at 9:39

please add some reason ? why it doesn't work.
– Sachin
Mar 22 '16 at 9:48

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.
– Paul
Mar 22 '16 at 9:54

.child1

.child2

because word wrap works when there is spaces between words of there is no space between words you should use word break
– Gaurav Aggarwal
Mar 22 '16 at 9:59

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

min-width: 0

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


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.