Почему в Internet Explorer 11 form опустилась ниже footer?

Question

[Нина]

header, main и footer находятся в body с классом page, у которого такие стили:

.page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  font-family: "museo-sans", Helvetica, sans-serif;
  font-size: 20px;
  line-height: 1;
  color: #2f2e2f;
  box-sizing: border-box;

В браузерах Opera, Chrome, Firefox, Edge, Brave - все смотрится отлично. А в IE форма, которая должна быть выше футера, сползла ниже него. Вот ссылка на сайт.

Answer 1

[xdevelx]

для .page height: 100%;замените на min-height: 100%;
Не ограничивайте строго высоту - у вас из-за этого секция с формой не влазит в main

Comments

[Нина]

Спасибо, - все теперь хорошо. А подскажите, пожалуйста, почему эта ошибка проявилась только в IE ?

[xdevelx]

Нина, Это баг IE при работе с flexbox.

[Нина]

Спасибо за подсказку :)