Why Doesn't `display: flex` Work on `` Elements?

Why the Fieldset Element Doesn't Behave as a Flex Container

Styling a fieldset element with display: flex or display: inline-flex may leave you scratching your head as it behaves differently than expected. Instead of acting as a flexible container, it behaves similarly to block or inline-block elements, respectively.

Bug or Expected Behavior?

This behavior in Firefox and Chrome (while surprisingly working in IE) is not a bug. According to Bug 984869, button elements are rendered with special handling and may ignore CSS properties like display. This behavior is not unique to buttons; fieldset, table, and del elements also exhibit similar rendering abnormalities.

The Solution

To reliably lay out the children of a fieldset element as specified in CSS Flexible Box Layout, you'll need to use a workaround: wrap your child elements inside a div container within the fieldset. This approach works consistently across browsers, ensuring the desired layout in all cases.

Firefox 46 and Beyond

However, there's good news for Firefox users: Firefox 46 and later implementations support Flexbox for the fieldset element (see bug 1230207). This means you can use display: flex on fieldsets without the need for workarounds.

The above is the detailed content of Why Doesn't `display: flex` Work on `` Elements?. For more information, please follow other related articles on the PHP Chinese website!