21

Why is flexbox not working properly with fieldset or other non-div tags? I expect them to line up next to each other like in the div example, as flex-direction: row; is default in flexbox. However fieldset is force applying a width to them, and I do not understand why.

HTML

<fieldset>
    <div>fieldset flexbox</div>
    <div>1</div>
    <div>2</div>
</fieldset>

<div id="parentdiv">
    <div>div flexbox<div>
    <div>3</div>
    <div>4</div>
</div>

CSS: All elements are set to display: flex;

http://jsfiddle.net/c5BB5/1/

JohnB
  • 1,231
  • 1
  • 18
  • 33
Andreas
  • 2,287
  • 2
  • 23
  • 26
  • Define 'not working properly' - What are you expecting? – George Oct 30 '13 at 10:12
  • Thanks for feedback. Struggled to phrase the questions. Updated it now. Understandable? – Andreas Oct 30 '13 at 10:46
  • If this is an extension of your original question, update the original rather than reposting: http://stackoverflow.com/questions/19678166/is-it-possible-to-make-all-elements-on-the-page-a-display-flex-flexbox – cimmanon Oct 30 '13 at 12:25
  • 1
    @cimmanon: Nope, they are different. This questions is related to the fact that non-div tags like fieldset do not get the expected flexbox properties when they are set. The other questions is a css-selector questions of how to give all elements on a page the same display:flex-property. They might seem to be the same at first sight, but they really are not:) – Andreas Oct 30 '13 at 14:55
  • [Flexbox not working on button or fieldset elements](https://stackoverflow.com/q/35464067/3597276) – Michael Benjamin Mar 09 '19 at 12:18

1 Answers1

23

As far as I can tell, this is down to browser bugs to do with the fieldset element.

It's a known issue with fieldset elements in Chrome. Firefox has a similar (very old) issue in that legend and fieldset are replaced elements.

I guess it's safer to use a <div role="group"> instead of a real fieldset for now. In your CSS you could use div[role='group'] as your selector. See http://www.deque.com/aria-group-viable-alternative-fieldset-legend for more information.

Olly Hodgson
  • 15,076
  • 3
  • 40
  • 60
  • Thanks @ollyhodgson for pointing this out. Never thought it would be a browser bug. Try the jsfiddle in Opera, Opera Next, Firefox, Safari and Chrome. I guess this is the correct result I should expect: http://d.pr/i/iKzw ? (I only get that in Opera 12.15 Mac. – Andreas Oct 31 '13 at 09:43
  • Yes, that's what I'd expect to happen. I guess it's safer to use a `
    ` instead of a real `fieldset` for now. In your CSS you could use `div[role='group']` as your selector. See http://www.deque.com/aria-group-viable-alternative-fieldset-legend
     – Olly Hodgson Oct 31 '13 at 11:18
  • A year and a half this bug remains intact in both browsers... :( – Pere May 29 '15 at 08:58
  • 2
    @Pere Indeed - the Firefox bug was raised in 2005! Use `
    ` instead of `
    ` if you need complex styling.
     – Olly Hodgson Jun 02 '15 at 09:59
  • Yeah @OllyHodgson, I already did that, but thanks again for pointing out! – Pere Jun 02 '15 at 10:22