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

Question

当我有一个带有居中项目的 flexbox 时，:hover 伪类在 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

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

Answer 2

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