Проблема с отображением flex-direction: column в IE

Суть проблемы — в Internet Explorer если задаем отображение блоков в колонку flex-direction: column, то можем получить такую ситуацию, что контент слипается из-за того, что у потомков получается высота 0.

Пример кода:

<div class="container">
  <div class="child">
    foo
  </div>
  <div class="bar">
    bar
  </div>
</div>

Код CSS:

.container {
  display: flex;
  flex-direction: column;
}

.child {
  flex: 1;
}

такая же проблема при написании flex: 1 1 100%.

Решение проблемы:

.container {
  display: flex;
  flex-direction: column;
}

.child {
  flex: 1 1 auto;
}

Решением проблемы является именно flex-basis: auto.

Потому что flex: 1 является сокращенным вариантом flex-grow: 1flex-shrink: 1flex-basis: 0. Нулевой базовый размер подходит, потому что элемент будет увеличиваться по мере необходимости.

Но в Internet Explorer это работает только тогда, когда flex-контейнер использует направление flex-direction: row. Для flex-direction: column дочерние элементы будут перекрываться, как если бы они не занимали никакую высоту.

Google глючит или как корпорация забивает на свои же сервисы, которые не приносят прибыль

Все вебмастера и дизайнеры используют Google Fonts или хотя бы раз да использовали. Это Google шрифты, которые без особых навыков или долгих настроек можно подключить на своем сайте или использовать в своем макете.

Включить видео с youtube после нажатия на кнопку или элемент

Суть задачи такая — запустить видео по нажатию на какой-то элемент. Самый простой вариант —…

Как убить зависший локальный сервер с ошибкой «EADDRINUSE: address already in use»

В общем, развернутый локальный сервер, запущенный на Node, пришлось закрыть без остановки, и после этого…

Ссылки для звонка/чата/перехода для мессенджеров (Skype, Viber, Telegram, WhatsApp, Facebook Messenger)

Постоянно приходится вспоминать как повесить правильную ссылку на чат скайпа или вайбера. Давно уже пора…

Ответить