IE11 flexbox контейнер не растет - PullRequest
0 голосов
/ 23 сентября 2018

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

.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 кнопки перекрываются, и контейнер остается меньше 1 кнопки:

IE11

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

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

1 Ответ

0 голосов
/ 23 сентября 2018

Хорошо, я понял это!Проблема в 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 preview, но это действительно IE11.Темно-синий значок «е» - MS Edge.Мне пришлось взломать Блокнот и создать локальный HTML-файл, так как codepen не работает с IE 11, и мне не хотелось исправлять мои отступы.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...