Display Flex在调整项目大小时提供不一致的滚动行为

Question

我正在尝试在flex容器中获取一个悬停的项目，以在悬停时增加其大小。我已经做了很多工作，但是问题是，窗口无法始终滚动。

如果向下滚动以便显示页脚，则将鼠标悬停在左侧的红色框中会导致页面滚动到右侧，而滚动到右侧。

理想情况下，我希望两个框的行为都像左边的一样。

感谢所有建议

*{
  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>