Рассмотрим следующий фрагмент:

.container {
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 3px solid red;
}
.action {
  flex-basis: 100%;
  flex-shrink: 1;
  width: 100%;
}
.button {
    font-size: 12px;
    line-height: 3rem;
    width: 100%;
}
<div class="container">
  <div class="action">
    <button class="button" type="button">
      Button label 1
    </button>
  </div>
  <div class="action">
    <button class="button" type="button">
      Button label 2
    </button>
  </div>
</div>

В Chrome кнопки отображаются вертикально, и контейнер увеличивается, чтобы соответствовать им:

Chrome

Но в IE11 кнопки перекрываются, и контейнер остается меньше одной кнопки:

IE11

Это известная ошибка в IE? (если да, будет оценен указатель)

Есть ли известный обходной путь?

0
Jakub Sadura 23 Сен 2018 в 19:10

1 ответ

Лучший ответ

Ладно, разобрался! Проблема в align-items: center;. Я считаю, что это именно то, что вы ищете (без изменений в html):

.container {
  display: flex;
  flex-direction: column;
  border: 3px solid red;
}
.button {
  font-size: 12px;
  line-height: 3rem;
  width: 100%;
}

IE 11

Боковое примечание: я знаю, что на коробке виртуальной машины написано предварительный просмотр MSEdge Win10, но это действительно IE11. Темно-синий значок «е» - это MS Edge. Мне пришлось взломать Блокнот и создать локальный HTML-файл, поскольку codepen не работает с IE 11 и не позаботился о том, чтобы исправить мои отступы.

0
Community 20 Июн 2020 в 09:12