Вопрос по flexbox, css, internet-explorer-11, css3, html – align-items, align-self не работает на IE11

7

у меня естьпростой плункер здесь.

.container {
  display:flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  min-height: 4em;
}

.nav {      
  flex: 0 0 4em;
  height: 1em;
}

.logo {
  flex: 1 0 auto; 
  align-self: stretch;
}

Это работает так, как я хочу в Chrome 49:

Но не в IE11:

Я проверил, что IE не находится в режиме совместимости - это не так - он находится в режиме IE11.

Что тут происходит?

Ваш Ответ

1   ответ
14

min-height свойство flex-контейнера не распознается flex-элементами в IE11.

Если вы переключитесь наheight: 4em, вы увидите, что ваш макет работает.

Простой обходной путь - сделать.container гибкий элемент

Другими словами, добавьте это в свой код:

body {
    display: flex;
}

.container {
    width: 100%; /* or flex: 1 */
}

По какой-то причине, делая ваш гибкий контейнер также гибким предметом,min-height Правило соблюдается дочерними элементами.

Подробнее здесь:Flexbugs:min-height на флекс контейнер не распространяется на его флекс

Похожие вопросы