Flexbox Works In Internet Explorer But Does Not In Chrome

What I would like to achieve: JSFiddle

1

2

3<

Solution 1:

First I'll suggest you to not mix float: left; with display: flex;. Consider specifying display: inline-flex; instead.

That said, I'm afraid you have to do a little computation, to find the biggest offset right (including margins) of all the children inside the container element :

The following piece of code requires jQuery, and is supposed to run when the DOM is ready :

// -----------------------------------------------------------------------------
// Find the biggest offset right among all children, relatively to the container
// -----------------------------------------------------------------------------

var maxOffsetRight = 0,
    currentOffsetRight;

$('#container').children().each(function() {
   currentOffsetRight = $(this).position().left + $(this).outerWidth(true);
    if (currentOffsetRight > maxOffsetRight) {
        maxOffsetRight = currentOffsetRight;
    }
});

// Set the width of the container
var offsetLeft = $('#container').position().left;
$('#container').css('width', maxOffsetRight - offsetLeft);

See fiddle

Note: You might think of an algorithm that looks for the offset right of the last child. That would work in most cases, but that could fail as well as you can set a property order on the flex items, to reorder them. Therefore the last child in the DOM is not necessarily the one that has the biggest right offset. That could also fail without reordering elements, if the children have arbitrary width. For example if the child before the last, in the same column, is larger than the last.

Share