带有 `max-height: 0` 的 Fieldset 在 Chrome v87+ 上总是溢出

Question

在Chrome 86，fieldset与max-height比其内容的高度更低，overflow: hidden将隐藏的内容fieldset。

然而，在 Chrome v87 ( 87.0.4280.67) 上，这显然改变了。

如果height设置的a小于内容，则它会正确隐藏溢出。这个错误只出现在max-height.

以下代码段将在 Chrome v86 及更早版本、Firefox 和 Safari 上正确呈现。在 Chrome 87 上，第一个fieldset会溢出。

fieldset {
    /* Reset user-agent styles */
    padding: 0;
    margin: 0;
    border: 0;
    
    overflow: hidden;
    
    /* Misc */
    background: cyan;
    margin-top: 1em;
}

<fieldset style="max-height: 9px">
  This should be half-visible
  (<code>max-height: 9px; overflow: hidden</code>)
</fieldset>

<fieldset style="height: 9px">
  This should also be half-visible
  (<code>height: 9px; overflow: hidden</code>)
</fieldset>

有解决方法吗？是否有为此提交的 Chromium 错误？我试过搜索，但没有找到任何确定的东西。 有一张 Chromium 票，详见此处。

Answer 1

作为解决方法，您可以将其添加到字段集中：

display: -webkit-box;或者display: -webkit-inline-box;

fieldset {
    /* Reset user-agent styles */
    padding: 0;
    margin: 0;
    border: 0;
    
    overflow: hidden;
    
    /* Misc */
    background: cyan;
    margin-top: 1em;
}

<fieldset style="max-height: 9px; display: -webkit-box;">
  This should be half-visible
  (<code>max-height: 9px; overflow: hidden</code>)
</fieldset>

<fieldset style="height: 9px">
  This should also be half-visible
  (<code>height: 9px; overflow: hidden</code>)
</fieldset>