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.

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