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/
You could use flexbox on everything but you really shouldn't. Flexbox is a new layout algorithm for laying out complex web pages/applications, but he also have it disadventages(temporarily the most slower layout). Basically flexbox is the most best for smaller page components and UI elements.
Use a container with display: flex and assign the width to 50% to the two parts you want to divide.
The flexbox code is triggered on the parent element, but affects all of the child elements.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With