IE11 flexbox max-width и margin: auto;

У меня есть простой контейнер flexbox с двумя элементами:

<div id='container'>
    <div id='first-item'>first item</div>
    <div id='second-item'>second item</div>
</div>

Первый элемент имеет flex-grow: 1 и max-width до 200px. Второй элемент имеет margin-left: auto; для выравнивания справа к контейнеру:

  #container {
    display: flex;
  }

  #first-item {
    max-width: 200px;
    flex: 1;
  }

  #second-item {
    margin-left: auto;
  }

Вот рабочая демонстрация: http://jsfiddle.net/c81oxdg9/2/

Я хочу, чтобы первый элемент был выровнен слева и имел некоторую максимальную ширину. И второй элемент будет выровнен правильно.

Прекрасно работает в Chrome, Firefox и даже в IE10, но не в IE11. В IE11 второй элемент выталкивается из контейнера.

Как исправить это для IE11? Я пропустил какое-то свойство?

Ответы

Ответ 1

Я нашел ответ, который, кажется, работает (хотя я признаю, что не тестировал его в IE 10): я добавил width: 100% к элементу, нуждающемуся в выравнивании. Отлично работает в IE.

Возможно, слишком поздно, чтобы помочь вам, но, возможно, кому-то понадобится решение.

Ответ 2

У меня была та же проблема с

display: flex;
-ms-flex: 1;
max-width: 300px;

в сочетании с

margin: 0 auto;

для дочерних элементов. Они выталкиваются из контейнера div.

Однако, я решил это с помощью try и error и чтения

https://github.com/philipwalton/flexbugs#11-min-and-max-size-declarations-are-ignored-when-wrapping-flex-items

и

Flexbox Проблемы с шириной IE10

Наконец, я решил это с заменой

-ms-flex: 1;

с

-ms-flex: 1 0 auto;

Остерегайтесь. Это работает только в том случае, если вам действительно нужна максимальная ширина внутри столбцов flex. иначе он будет выглядеть как display: block.

Ответ 3

В моем случае у меня было что-то вроде:

HTML:

<div class='my-flexbox'>
        <div class='wrapper'>
            <div class='content'>
                <!-- ... -->
            </div>
        </div>
</div>

CSS

.my-flexbox {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.wrapper {
    padding: 16px;
    margin: auto;
    max-width: 90%;
    min-width: 40%;
}

.content не имеет фиксированной ширины (или высоты) любого типа, но вместо этого содержит комбинацию встроенных элементов и элементов блока.

Я хотел, чтобы мой контент выглядел по центру и по горизонтали, но относился к max-width и max-height от .wrapper. Указание justify-content: center; на .my-flexbox вытолкнуло содержимое с экрана вправо (кажется мне ошибкой), а align-items: center; не повлияло (насколько мне известно, это поведение по умолчанию).

Вместо решение должно было добавить align-self: center; в .wrapper.

Почему это имеет какой-то смысл вне меня. Предположительно, это всего лишь ошибка для flexbox в IE11.