Csswg-drafts: [css-display-3] grid/flex layout support for <fieldset>

[gl3bl]

I’m investigating an interop issue with grid/flex layout for <fieldset>. As you can see from the table below the grid/flex layout support of <fieldset> varies a lot between browsers. Only Firefox and IE 11 handle <fieldset> with display: flex.

Test case: http://codepen.io/anon/pen/MaYBoX
or a shorter version:

<fieldset style="display: flex">
    <legend>Legend</legend>
    <div>These fields</div>
    <div> shouldn't be</div>
    <div>stacked vertically</div>
</fieldset>

| Browser | Test result | Bug tracking link |
| --- | --- | --- |
| Firefox 47 | :+1: | fixed |
| Chrome 51 | :x: | open |
| IE 11 | :+1: | |
| Edge | :x: | open |

It’s interesting that Edge removed <fieldset>’s flex layout support that was supported in IE11. May be someone from Microsoft can share some insights about this decision.

According to http://www.w3.org/TR/CSS21/visuren.html#display-prop the display property “Applies to: all elements”.

Can we decide whether 'display' property should have rendering effect on <fieldset>.

[gl3bl]

@gregwhitworth

[tabatkins]

There's nothing magical about <fieldset> _per spec_ - it should just be a block normally, and accept other display values like everything else does.

In practice, it's magic in ways that are completely unexplained in CSS, and we haven't wanted to generalize that magic so we've never really tried to explain it.

[bfgeek]

@gregwhitworth Do you have an idea/insight as to why IE->Edge changed behaviour here?

[gregwhitworth]

hmmm, odd. I don't know off hand; I'll need to dig through our changes to figure out where this changed and why.

[fantasai]

Closing as invalid, as this isn't a spec issue and @gregwhitworth hasn't come up with a reason for it to become one...

[botmad]

amazing component but inability to flex the fieldset is upsetting indeed.

[jfrazzano]

Problem still seems to be here. Anyone know about the trying to extend it as Custom Element? I had hoped to use it to wrap inputs, buttons etc. and have them all fire back top the same form wherever it may be.

[emilio]

To be clear, @zcorpan did a bunch of work specifying the fieldset rendering (see https://github.com/whatwg/html/pull/3934), and I believe behavior here should be clear.

This is just a Chromium bug (I think WebKit / Safari fixed it), so instead of complaining here is not useful, people should refer to https://bugs.chromium.org/p/chromium/issues/detail?id=375693 instead.