With the Chrome 87 update, I started getting user-submitted bug reports because some of the fieldsets on a form started to overflow overtop of the content below it.
Here is a fiddle that shows the issue in its most reduced form: http://jsfiddle.net/phanbu/69v1xa5m/21/
Even though the .box has
.box {
// ...
overflow-y: auto;
}
The contents overflow the container down the page. The funny thing is that changing the .box from a <fieldset> to a <div> makes it overflow in the expected way:
https://jsfiddle.net/phanbu/6Lc4wrma/5/
Because this happens in Chromium, the updated version of Edge behaves in the same way. Is this a Chromium bug, or is there a special thing about <fieldset> elements that I'm misunderstanding?
Update:
Based on the comments below, I've decided to set an absolute height on those <fieldset>s. This means that when there are one or two checkboxes, there will be extra empty space in the element.
I could have converted them into <div>s for now. But that would mean more changes in more places, and I want it to be as easy to change back as it can be.