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

Question

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 .

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

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 .

Answer 1

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>

Answer 2

Turns out this is a known Chromium bug: Issue 1151858 .

As, of December 2020, this has been merged into their main branch and verified that the issue is no longer reproducible.