CODEWITHSUNDEEP
cssflexboxfieldset
Andreas
Andreas

Reputation: 2407

Why are not all flexbox elements behaving like flexbox divs?

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/

Upvotes: 21

Views: 4177

Answers (2)

Woodrow Barlow
Woodrow Barlow

Reputation: 9117

This bug has been fixed in Chrome #40366646 and Firefox #1230207. The code snippet in the question now works as intended in major browsers.

Upvotes: 0

Olly Hodgson
Olly Hodgson

Reputation: 15803

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.

Upvotes: 23

Related Questions