Css 在悬停时操纵文本外观时，flex定位元素的意外行为

我一直在玩flexbox属性，看看它们能做什么：

• 显示器：flex
• 柔性生长：n
• 对齐项目：居中
• 证明内容：中心

然而，我遇到了一些意想不到的行为，我希望这里的人能为我澄清。在悬停伪选择器上操纵flex定位元素的以下属性之一：

• 文本大小
• 字重
• 文本阴影

元素的相对权重似乎要重新测量，因此元素的位置会跳跃。如果在顶部两个或底部两个图元之间反复来回悬停，则可以将它们的权重减少到基本为零。一个jsfiddle来说明：

（还有一个项目数量是原来的两倍：）

以及相应的代码：

[HTML]

  <div class="container">
    <div class="item one">
      <a href="#">Item 1</a>
    </div>
    <div class="item two">
      <a href="#">Item 2</a>
    </div>
    <div class="item three">
      <a href="#">Item 3</a>
    </div>
  </div>

---

在发布这个问题之前，我没有机会测试多个环境，但事实证明，我只能在Chrome操作系统上重现这种奇怪的行为，特别是构建48.0.2564.48 beta 64位。Windows上的标准Chrome 47没有问题

查看以下录音以查看我看到的内容：

在这一点上，我相信这个问题是特定于Chrome操作系统或Chrome beta频道的。如果我有时间，这是不可能的，我会调查，直到我觉得有信心提交一个铬问题谷歌代码。。。否则，希望其他人会看到这一点，并继续我的发言

---

明天我会将此标记为可接受的答案，除非在此期间有任何其他人提供更全面的解决方案。

这是一个结构非常合理的问题。恭喜你，但问题到底是什么？o、 OThanks，我当然理解解决一个表述不清的问题的困难。在这种情况下，您可能无法重现问题。我的回答是澄清和屏幕录音。

div.container {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  /* */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
div.item {
  background-color: rgbA(0, 0, 0, 0.05); outline: 1px solid white;
  /* */
  display: flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
}
div.item a {
  padding: 1em 2em;
  font-family: 'sans-serif'; font-size: 1em;
  text-transform: uppercase; text-decoration: none;
  color: rgbA(150, 150, 150, 1.00); background-color: rgbA(255, 255, 255, 1.00); outline: 1px solid white;
}
div.one a:hover { text-shadow: 0 0 1em black; }
div.two a:hover { font-weight: bold; }
div.three a:hover { font-size: 1.5em; }