auto margin expansion not working inside flex box on IE11

Question

I have an issue with margin: auto inside a flex box in IE11.

Here is the organization I expect. The empty child have no content but the margin: auto should make it take the whole remaining space only with its margins.

When on Chrome Firefox or Safari, I get the results I want here.

But on IE11 the justify-content: flex-end does not seem to have any effects and the margin: auto is simply ignored with the empty child having no margin at all.

I've spent the whole day on this and I haven't found any solutions... Any ideas?

EDIT: It's not an issue about centering per say, it's more about why the justify-content: flex-end or margin: auto do not have ANY incidence on the layout.

https://stackoverflow.com/questions/37534254/flex-auto-margin-not-working-in-ie10-11? — kukkuz, Mar 05 '19 at 02:01

score 0 · Answer 1 · answered Mar 05 '19 at 07:46

This seems like a known issue, you could check this link. And this issue is fixed in Edge browser.

So, as a workaround, you could try to set the margin-top or margin-bottom properties by yourself. Like this:

<style type="text/css">
    .grandparent {
        min-height: 100vh;
        background: red;
    }

    .parent {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: 100vh;
        width: 100%;
        max-width: 46rem;
        margin: 0 auto;
        padding: 1.5rem 1rem;
        background: blue;
    }

    .empty-child {
        margin-top: 20%;
        margin-bottom: 20%;
        max-width: 100%;
        width: 100%;
        height: 400px;
        background: yellow;
    }

    .child-1,
    .child-2 {
        display: flex;
        width: 100%;
        height: 60px;
        margin-top: 1.25rem;
        margin-bottom:1.25rem;
        background: purple;
    }
</style>

I've seen this bug report on the microsoft page, but what you are proposing is not what I want, the `.empty-child` should not have a fixed height. It should take the all the remaining space ONLY with its margins. — geauser, Mar 05 '19 at 08:25

score 0 · Accepted Answer · answered Mar 06 '19 at 10:09

0

It appears that my problem was coming from the fact that IE11 was not taking into account the min-height of .parent.

Fixed it by making .grandparent a flexbox.

auto margin expansion not working inside flex box on IE11

2 Answers2