Flexbugs: Nested flex container is not calculating height correctly in IE11

[markadrake]

Here is a JSfiddle:

https://jsfiddle.net/qxnL4xhb/10/

Intended result:

The nested flex containers should be of equal height to the sibling with the largest content. The text "Aligned Text" should appear to be a new row. It works in Edge, Chrome, and Firefox:

IE11:

It does not work in IE11. Instead the first container doesn't seem to have any real height applied to it (looking at the bounding box highlight in dev tools) and so I get this stacking affect instead.

Though this appears to be similar to an issue already reported - I had trouble implementing either solution. (Bug 3). Can anybody help shed some light on this?

[dubrod]

you would have to position rel on -vertical plus padding, and position bottom on -static

or you can just add min-height: 220px for .flex .flex to give it some height

[markadrake]

Hi @dubrod thanks for your reply.

Unfortunately what you are talking about requires relative and absolute positioning for items of a known width and height. I'm using flexbox to support various types of content - so the height is not a known factor. Nor is it always the same content that's being aligned.

This works perfectly across Chrome, Edge, and Firefox. It doesn't seem to work in IE11. I don't understand why IE11 specifically doesn't think the first child of .flex.-vertical has no real height, and thus the aligned content floats up.

I tried implementing something with margin-top: auto but this causes the height of the container to be much larger than it needs to be.

[markadrake]

Chrome, Edge, and Firefox:

IE11:

[philipwalton]

Technically, Flexbox isn't supposed to handle cases like this (2D layout), Grid is.

You could probably get it working with Flexbox if you re-wrote your markup to be two rows instead of three columns.

[markadrake]

I disagree Phillip. The combination of flexbox's rules and convention (media dimensions sharing a common ratio) certainly allow for this. This is using Flexbox concepts to provide equal height columns with aligned content.

And furthermore, it works cross-browser the way I expected it to. There is a single culprit, which is IE11 and below not adhearing to it. So either IE11 and below is adhearing to the standard, or the latest evergreen versions across manufacturer's are all incorrect.

Either way - it's a bug.

Sorry to be a bother.

[philipwalton]

Like I said before, if you wanted to do it with Flexbox, you should do it as two rows instead of three columns. If you wanted to do it as three columns (which is more intuitive), then you should use grid.

I'm not saying it's not an inconsistency between browsers. You've already shown that it is. I'm just saying that 2D, circularly dependent layouts like this are more appropriately handled by grid.

[orgertot]

Found this via google.

I strongly disagree too!

@markadrake did u find any solution?

[myfonj]

Generally, you should not resort to width/height: 100% in flex; default align-items: stretch; usually makes this stretching for you.
In this certain case you can use margin-top: auto; (as @markadrake mentioned above) to push the last column to the bottom of the row:

https://codepen.io/myf/pen/BxdYGq

• works in IE11,
• no extra wrapping elements used,
• only workaround needed was max-width: 100% for the overflowing non-wrapped text content in center aligned item (flexbug-2).

[markadrake]

Thanks for your feedback @orgertot, I still to this day consider this to be a bug but we did find a work-around for it. @myfonj's example is right on the money. I'm providing another CodePen example only because I take a different approach with naming and use of CSS classes. It's the exact same trick using margin-top to bottom align the last element.

https://codepen.io/markadrake/pen/ELwjqg