Flexbox parent to extend width if the child contai

I wonder if anyone can help me with this issue, I can't seem to find anyone else who's wanting to do this with flexbox!

I've set up a basic Flexbox scenario where several elements (li) appear in a flexbox container (ul).

And I've also set it so that the maximum amount li's that will fit in a row before wrapping is 3 (done by setting a ul width of 900px and a flex-basis of 260px for the li's).

This all works great, but the problem for me arises in the fact that the text will ultimatley be coming from a database. Sometimes in German (so long words). I've no idea which li's will have long words or not so I need to set them all the same.

Basically my questions is...

Why when a 'li' has longer than normal text inside it, does the li not extend to be wider? So in the example below I would like the 3rd li (Header text 3) to extend to show all its text and it would probably need to wrap onto the next row to show this! So it would need to switch to 2 rows of 2, rather than a row of 3 and a row of 1.

I hope that all makes sense, any help would be great. :)

Code and Codepen below.

Codepen Link

HTML...

  <div>
  <ul class="FlexWidgetsNew">
  <li class="WidgetNew">
  <h1>Header text 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium nulla eget libero congue.</p>
</li>


<li class="WidgetNew">
  <h1>Header text 2</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pretium nulla eget libero congue.</p>
</li>

<li class="WidgetNew">
  <h1>Header text 3</h1>
  <p>This text has a longer word than the rest xxxxxxxxxxxxxxxxxxxxxxxxxxxx12234567890 and so part of it is disappearing out of the li.</p>
</li>

<li class="WidgetNew">
  <h1>Header text 4</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</li>
</ul>
</div>

CSS...

  .FlexWidgetsNew {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  overflow: hidden;
  width:900px;
  background-color: #f00;
  }

.WidgetNew {
-webkit-flex: 1 1 300px;
-ms-flex: 1 1 300px;
flex: 1 1 300px;
-webkit-align-self: auto;
-ms-flex-item-align: auto;
align-self: auto;
padding: 10px 2% 30px 2%;
overflow: hidden;
box-sizing: border-box;
cursor: pointer;
border:1px solid #000;
}

h1 {
width: 100%;
word-wrap: normal;
color: #fff;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
}

p {
width: 100%;
word-wrap: normal;
color: #000;
font-family: Arial, Helvetica, sans-serif;
}

Flexbox doesn't seem to be aware of the overflowing text width. You said any help would be great. If you are ok with a bit of JavaScript (jQuery), then this problem of yours can be solved.

We'll start by adding a bit of CSS:

.WidgetNew.twobytwo {
  flex: 1 1 450px;
}

Then we'll use a bit of jQuery to find the overflowing long words and check if they are longer than the parent containers li.WidgetNew.

If the inner div with the long text is longer than the parent container then add the class .twobytwo to it's parent .WidgetNew element

Add the JavaScript:

var el = $('.WidgetNew > p');
$(el).each(function(index, value) {
  var tempEl = textWidth($(this));
  var tempElP = $(this).parent().width();
  if (tempEl > tempElP) {
    $(this).parent().addClass('twobytwo');
    $(this).parent().siblings().addClass('twobytwo');
  }
});

function textWidth(el){
    var text = $(el).html();
    $(el).html('<span>'+text+'</span>');
    var width = $(el).find('span:first').width();
    $(el).html(text);
    return width;
};

Your codepen updated

Hope this helps.