Flexbox parent to expand the width if the child contains a very long word

Question

I wonder if anyone can help me in this matter, I can not find anyone else who wants to do this with flexbox!

I installed a basic Flexbox script in which multiple elements (li) are displayed in a Flexbox container (ul).

And I also set it so that the maximum amount of li that will fit in the line before the wrapper is 3 (done by setting the width of ul 900px and the flex base 260px for li).

All this works fine, but the problem for me is that the text will be an ultimatum from the database. Sometimes in German (so long words). I have no idea who will have long words or not, so I need to set them the same way.

Mostly my questions ...

Why, when "li" is longer than regular text inside, does li not expand to be wider? So in the example below, I would like the 3rd li (text heading 3) to expand to show all of its text, and probably it would have to move to the next line to show it! Therefore, he will need to switch to 2 lines of 2, and not to a line of 3 and line 1.

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

Code and code 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; } 

Answer 1

Flexbox doesn't seem to know about overflowing text width. You said any help would be great. If everything is fine with JavaScript (jQuery) then this problem can be solved.

Let's start by adding CSS:

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

Then we will use a little jQuery to search for overflowing long words and check if they are longer than the li.WidgetNew parent containers.

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

Add 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; }; 

Code Code Updated

Hope this helps.