Css 子元素溢出导致鼠标悬停时不同容器中的按钮跑开

请参阅下面的代码片段。每当鼠标移动到按钮上时，

.nested toll

会因某种原因而展开，整个

.toll

容器会调整大小，因此按钮不再位于鼠标所在的位置，并且至少用鼠标无法单击

正文{
位置：固定；/*只是为了一个简单的示例*/
身高：70%；
显示器：flex；
弯曲方向：立柱；
}
身材，高{
柔性生长：1；
}
身体。高。嵌套高{
身高：100%；
背景颜色：黄色；
}
按钮：悬停{
边框颜色：黑色；
}

我很高
由于溢出，我看不见
将鼠标悬停在我身上

错误已修复，无需阅读下面的内容

PS：下面是我自己对Chrome上与flexbox和高度百分比相关的bug的勇敢描述

以下是一个更简单的问题示例：

正文{
高度：100px；
显示器：flex；
弯曲方向：立柱；
}
身体。高。嵌套高{
身高：100%；
背景颜色：黄色；
}
按钮：悬停{
边框颜色：黑色；
}

我很高
将鼠标悬停在我身上

如果这不是重复的，我将奖励一个好答案。我们可以通过删除flex grow使其更有趣：1。。。你仍然会有这个问题，所以请注意，这只发生在Chrome上，Firefox是可以的。这肯定是一个bug，它与高度的使用有关：100%。实际上，我并没有精确的解释，但是你正面临着一个周期计算：高度：每一次迭代都有100%的增长。哦，好的，如果它实际上是一个bug，而不是预期的行为，我猜“为什么”实际上并不是真的。bug似乎是固定的，考虑到边界颜色改变按钮大小的可能性，但是，当使用Chrome的Computed选项卡查看元素时，看起来并没有什么区别：它是否真的在某个地方导致了大小的变化？（这听起来很直观，因为这是问题的根源，但我看不到它存在）@Snow你说得对，这不是真正的尺寸，而是按钮的外观。我以为是尺寸，但似乎只是一个简单的错觉