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

Question

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

这是我期望的组织。空的 child 没有内容，但 margin: auto 应该使它只占用整个剩余 space 的边距。

在 Chrome Firefox 或 Safari 上，我得到了我想要的结果 here。

但在 IE11 上，justify-content: flex-end 似乎没有任何效果，margin: auto 被忽略，空的 child 根本没有边距。

我花了一整天的时间来解决这个问题，但我还没有找到任何解决方案...有什么想法吗？

编辑：这不是关于 centering 的问题，更多的是关于为什么 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 没有考虑 .parent 的 min-height。

通过将 .grandparent 设为 flexbox 来修复它。

关于此的更多信息。

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

auto margin expansion not working inside flex box on IE11

html

css

flexbox

internet-explorer-11