自动边距扩展无法在IE11的弹性盒内工作

Question

我在IE11的margin: auto框内的flex有问题。

这是我期望的组织。空孩子没有内容，但是margin: auto应该使它仅用边距占据整个剩余空间。

在Chrome Firefox或Safari上，我得到的结果是here。

但是在IE11上，justify-content: flex-end似乎没有任何作用，并且margin: auto只是被忽略了，因为空子级根本没有空白。

我已经花了一整天了，但还没有找到解决方案……有什么想法吗？

编辑：每句话说的居中都不是问题，更多的是为什么justify-content: flex-end或margin: auto在版面上没有任何影响。

Answer 1

这似乎是一个已知问题，您可以检查this link。而且此问题已在Edge浏览器中修复。

因此，作为一种解决方法，您可以尝试自行设置margin-top或margin-bottom属性。像这样：

<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>

Answer 2

看来我的问题出在IE11没有考虑min-height中的.parent。

通过将.grandparent设置为Flexbox来解决此问题。

有关此here的更多信息。