автоматическое расширение поля не работает внутри flex box на IE11

Question

У меня проблема с margin: auto внутри поля flex в IE11.

Вот организация, которую я ожидаю.Пустой дочерний элемент не имеет содержимого, но margin: auto должен заставить его занимать все оставшееся пространство только с полями.

При работе в Chrome Firefox илиSafari, я получаю результаты, которые я хочу здесь .

Но в IE11 justify-content: flex-end, похоже, не имеет никаких эффектов, а margin: auto просто игнорируется, а у пустого потомка вообще нет поля.

Я потратил вседень, и я не нашел никаких решений ... Есть идеи?

РЕДАКТИРОВАТЬ: Это не проблема о центрирования , скажем, это больше о том, почему justify-content: flex-end или margin: auto не имеют ЛЮБОГО падения на макете.

Answer 1

Похоже, что моя проблема возникла из-за того, что IE11 не учитывал min-height из .parent.

Исправлено, сделав .grandparent flexbox.

подробнее об этом здесь .

Answer 2

Это похоже на известную проблему, вы можете проверить эту ссылку .И эта проблема исправлена ​​в браузере 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>