Flex container doesn't display correctly next to a legend

[jeromelebleu]

Since #28917, the legend element is no longer rendered with display: block but it has float: left instead. There is at least an issue when displaying a grid just next to legend as it is rendered at the right and not under (see: https://jsfiddle.net/du95trv3/2/). I let you see what is the best way to fix that, normalize.css for example defines display: table for legend...

[ysds]

@jeromelebleu Thanks for your report.

More reduced test case: https://codepen.io/fellows3/pen/GRRVoVd

[MartijnCuppens]

I let you see what is the best way to fix that, normalize.css for example defines display: table for legend...

The float is added so that a border of the fieldset (if added) wraps around the legend.

[jeromelebleu]

Thanks @MartijnCuppens for the explanation. As there is no border by default and to prevent side effect, could it be a solution to remove the float and let it up to the developer to add it as needed? Just my two cents...

[MartijnCuppens]

I've added this to the v5 board. This should be fixed, or the changes in v5 should be reverted (making it harder to theme <legend>s). We can start from #29831, but got to find a way to fix it in Edge