Search code examples
cssgoogle-chromeoverflowfieldset

Fieldset with `max-height: 0` always overflows on Chrome v87+

On Chrome 86, a fieldset with a max-height less than the height of its contents and overflow: hidden would hide the contents of that fieldset.

Chrome 86 overflow

However, on Chrome v87 (87.0.4280.67), this apparently changed.

Chrome 87 overflow

If a height is set that is less than the contents, then it correctly hides the overflow. This bug only appears with max-height.

The following snippet will render correctly on Chrome v86 and earlier, Firefox, and Safari. On Chrome 87 the first fieldset will overflow.

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>

Is there a workaround for this? Is there a Chromium bug filed for this? I've tried searching, but haven't found anything definitive. There is a Chromium ticket, as detailed here.

Solution

  • As a workaround you can add this to the fieldset:

    display: -webkit-box; or 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>