NotchedOutline label may generate a large hidden box that generates overflow.

[ThomasKleffel]

If the label of a NotchedOutline is not currently notched, the maxWidth of the legend is set to 0.01 - this means that the text in the that's inside might be wrapped if it's longer ("Label Template (for preview)" in my case) and generate a block that is higher than the NotchedOutline itself. The is hidden, so that's not noticeable, but it will generate overflow that might cause a container to scroll.

I have fixed this for me by adding "white-space: nowrap" to the CSS properties of the inside the legendLabelled class.

Edit: Minimal example: https://codesandbox.io/s/elated-gauss-pxwn8

[oliviertassinari]

Please provide a minimal reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[oliviertassinari]

Duplicate of #12255

[ThomasKleffel]

What I am proposing to fix is not really a duplicate of #12255. There the problem is that labels that are too long for one line are not properly positioned.

The issue I have is that even a short label (like "A B C D") generates a invisible overflowing box.

[oliviertassinari]

@ThomasKleffel How do you reproduce the issue? What browser are you using? Do you have screenshots?

[ThomasKleffel]

I am seeing the problem with Firefox 79.0 - I just checked with Chrome and Edge and there the problem is not visible.

The following screenshot shows how my minimal example looks for me in Firefox 79.0. The scrollbar should not be there.

In the following picture I have patched the DOM to remove the "visibility: hidden" property of the span in the label to illustrate why the span's box is so high:

In Chrome (next picture) the span's box is also higher than the DialogContent - however for some reason there is no scrollbar:

[oliviertassinari]

We had handled this issue in #20067, however, Firefox doesn't work with overflow hidden on a fieldset. I think that the simplest will be to report Firefox the issue and wait for a fix. The usage of white-space: nowrap leads to other layout issues. Moving overflow hidden to the legend leads to an issue with Safari and iOS.