Дисплей flex дает несогласованное поведение прокрутки при изменении размера элемента

Question

Я пытаюсь вытащить находящийся в гибком контейнере предмет, который нужно увеличить, при наведении.У меня так много работы, но проблема в том, что окно не прокручивается последовательно.

Если вы прокрутите вниз так, чтобы нижний колонтитул был виден, при наведении курсора на левую красную рамку страница прокручивается так, как справане.

В идеале, я бы хотел, чтобы оба поля вели себя как левый.

Все предложения приветствуются

*{
  box-sizing:border-box;
}
header{
  background:green;
  height:200px;
  margin-bottom:1em;
}
.flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

}
.flex > div {
  height: 300px;
  padding: 1em;
  width:50%;
  transition: all .5s ease-in-out
}
.flex div div {
  height: 100%;
  width: 100%;
  background: red;

}

.flex > div:hover{
 height:500px;
  width: 150%;
}
footer{
  background:blue;
  height:200px;
  margin-top:1em;
}

<header></header>
<div class="flex">
  <div>
    <div>

    </div>

  </div>
  <div>
    <div>

    </div>
  </div>
</div>
<footer></footer>