自动边距扩展在 IE11 上的弹性框内不起作用

Question

我在 IE11 的 flex 框中遇到了 margin: auto 的问题。

这是我期望的组织。空子没有内容，但 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 设为弹性框来修复它。

更多关于这个here。