Flexbox Parent To Extend Width If The Child Contains A Really Long Word

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

Solution 1:

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: 11450px;
}

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');
  }
});

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