css - 悬停时子元素溢出导致不同容器中的按钮远离鼠标

Question

请参阅以下代码段。每当鼠标移到按钮上时，.nested-tall 会因某种原因扩展，整个 .tall 容器也会调整大小，因此按钮不再位于鼠标所在的位置是，并且不可点击，至少用鼠标是这样。

body {
  position: fixed; /* Just for the sake of a minimal example */
  height: 70%;
  display: flex;
  flex-direction: column;
}

body .tall {
  flex-grow: 1;
}

body .tall .nested-tall {
  height: 100%;
  background-color: yellow;
}

button:hover {
  border-color: black;
}

<div class="tall">
  <div class="nested-tall">
    I am Tall
  </div>
  <div>
    I am invisible due to overflow
  </div>
</div>
<button>Hover me</button>

解决方案很简单:不要让 child 溢出他们的 .tall 容器。但是这里到底发生了什么？为什么改变按钮的边框颜色会导致 .nested-tall 高度改变？该按钮不仅在一个完全不同的容器中，而且只更改了颜色，而不是任何应该影响框模型的内容。

如果您在代码片段编辑器中打开浏览器控制台，您会发现即使只是调整控制台的大小也会导致按钮移动，这很奇怪。

在没有悬停时给按钮一个边框颜色，顺便修复了它:

body {
  position: fixed; /* Just for the sake of a minimal example */
  height: 70%;
  display: flex;
  flex-direction: column;
}

body .tall {
  flex-grow: 1;
}

body .tall .nested-tall {
  height: 100%;
  background-color: yellow;
}

button:hover {
  border-color: black;
}
button {
  border-color: black;
}

<div class="tall">
  <div class="nested-tall">
    I am Tall
  </div>
  <div>
    I am invisible due to overflow
  </div>
</div>
<button>Hover me</button>

就像在悬停时使用 other 的一些属性一样:

body {
  position: fixed; /* Just for the sake of a minimal example */
  height: 70%;
  display: flex;
  flex-direction: column;
}

body .tall {
  flex-grow: 1;
}

body .tall .nested-tall {
  height: 100%;
  background-color: yellow;
}

button:hover {
  color: black;
}

<div class="tall">
  <div class="nested-tall">
    I am Tall
  </div>
  <div>
    I am invisible due to overflow
  </div>
</div>
<button>Hover me</button>

删除 .tall 底部的文本“我因溢出而隐形”也是如此:

body {
  position: fixed; /* Just for the sake of a minimal example */
  height: 70%;
  display: flex;
  flex-direction: column;
}

body .tall {
  flex-grow: 1;
}

body .tall .nested-tall {
  height: 100%;
  background-color: yellow;
}

button:hover {
  border-color: black;
}

<div class="tall">
  <div class="nested-tall">
    I am Tall
  </div>
  <div>
    
  </div>
</div>
<button>Hover me</button>

到底是什么导致悬停时或调整控制台大小时出现这种奇怪的行为？

Answer 1

错误已修复，无需阅读下文!

^{PS:以下是我自己对我认为是 Chrome 上与 flexbox 和百分比高度相关的错误的解释}

这是您的问题的一个更简化的示例:

body {
  height: 100px;
  display: flex;
  flex-direction: column;
}

body .tall .nested-tall {
  height: 100%;
  background-color: yellow;
}

button:hover {
  border-color: black;
}

<div class="tall">
  <div class="nested-tall">
    I am Tall
  </div>
  <div style="height:1px"></div>
</div>
<button>Hover me</button>

请注意在悬停时如何将尺寸增加 1px，这是溢出的 div 的尺寸。更准确地说，它是溢出的总大小 (100% + 1px - 100%)。

当您将 border-color 添加到按钮时，您会更改它的布局，因此您将触发页面重排(就像调整屏幕大小一样)。这将再次触发 height:100% 的计算，技巧就在这里。

父元素没有指定任何高度，因此从技术上讲，在子元素上使用 100% 应该会失败(在 Firefox 上就是这种情况)，但 Chrome 会考虑到parent 但是父级的高度是根据内容计算的(我们这里有一个循环)。最初，我们让父元素的大小等于文本的大小和 1px 然后嵌套的 div 将采用该大小作为它自己的大小(由于 height:100%)，我们将得到溢出的 1px。

现在想象一下下一次迭代。父级的大小现在比初始大小大了 1px，这个将用于计算文本的 height:100% 和 1px 的溢出等等。

这确实很奇怪，应该被视为一个严重 错误。在这种情况下使用 height:100% 应该属于 auto 或考虑初始布局而不考虑每次都不同的值。

---

你的其他片段不会触发这种行为，因为在其中一些片段中你不再改变按钮的布局(比如改变颜色或最初有边框)并且在其中一个片段中你有一个空的 div 溢出所以每次添加 0px 都不会发生任何事情。