Chrome 中的悬停效果不适用于 flexbox

Question

当我有一个带有居中项目的 flexbox 时，:hover pseudo-class 在 Chrome 中无法正常工作。悬停仅注册在居中项目的前 3/4 部分，而不是底部四分之一。 gif showing the problem

#container {
  margin-top: 50px;
  width: 100%;
  height: 50px;
  background-color: rgba(67, 67, 67, 0.8);
  display: flex;
  align-items: center;
  justify-content: flex;
}

#img-container {
  height: 140px;
  width: 140px;
  border-radius: 140px;
  background-color: blue;
}

#img-container:hover {
  border: 5px solid red;
}

#under {
  height: 50px;
  width: 100%;
}

<div id="container">
  <div id="img-container"></div>
</div>
<div id="under"></div>

Answer 1

当我有一个带有居中项目的 flexbox 时，:hover 伪 class 在 Chrome 中成功正常工作。

Answer 2

设法解决了。给 #img-container 一个 z-index 使 :hover 正常工作。