悬停效果无法与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使counter正常工作。

Answer 2

当我有一个带有居中项目的flexbox时，：hover伪类在Chrome中成功运行。