Why can’t be flex containers?

by

According to Bug 984869 – display: flex doesn’t work for button elements,

<button> is not implementable (by browsers) in pure CSS, so they are a
bit of a black box, from the perspective of CSS. This means that they
don’t necessarily react in the same way that e.g. a <div> would.

This isn’t specific to flexbox — e.g. we don’t render scrollbars if
you put overflow:scroll on a button, and we don’t render it as a
table if you put display:table on it.

Stepping back even further, this isn’t specific to <button>. Consider
<fieldset> and <table> which also have special rendering behavior:

data:text/html,<fieldset style="display:flex"><div>abc</div><div>def</div>

In these cases, Chrome agrees with us and disregards the flex
display mode. (as revealed by the fact that “abc” and “def” end up
being stacked vertically). The fact that they happen to do what you’re
expecting on <button style="display:flex"> is likely just due to an
implementation detail.

In Gecko’s button implementation, we hardcode <button> (and
<fieldset>, and <table>) as having a specific frame class (and hence,
a specific way of laying out the child elements), regardless of the
display property.

If you want to reliably have the children reliably arranged in a
particular layout mode in a cross-browser fashion, your best bet is to
use a wrapper-div inside the button, just as you would need to inside
of a <table> or a <fieldset>.

Therefore, that bug was marked as “resolved invalid”.

There is also Bug 1047590 – display: flex; doesn’t work in <fieldset>, currently “unconfirmed”.

Good news: Firefox 46+ implements Flexbox for <fieldset>. See bug 1230207.

More Related Contents:

  1. How do I use display:flex and justify-content:space-between, where the flex-item gets centered if there is only one of them?
  2. How to place elements like this
  3. Flexbox code working on all browsers except Safari. Why?
  4. One flex/grid item sets the size limit for siblings
  5. How to center a flex container but left-align flex items
  6. Left column and stacked right column using flexbox CSS [duplicate]
  7. flex property not working in IE
  8. Last margin / padding collapsing in flexbox / grid layout
  9. Equal width flex items even after they wrap
  10. How to center elements on the last row in CSS Grid?
  11. Align an element to bottom with flexbox
  12. Change div order with CSS depending on device-width
  13. input / button elements not shrinking in a flex container
  14. Flexbox and Internet Explorer 11 (display:flex in ?)
  15. What’s the difference between flex-start and baseline?
  16. Removing margin from flex items when they wrap
  17. ‘position: sticky’ not working when ‘height’ is defined
  18. Calculator keypad layout with flexbox
  19. Flexbox column-reverse in Firefox, Edge and IE
  20. Flex item should align left, not center, when it wraps
  21. Flexbox affects overflow-wrap behavior
  22. How to align flexbox columns left and right?
  23. CSS only solution to set MULTIPLE “same height” row sections on a responsive grid
  24. Prevent a child element from overflowing its parent in flexbox [duplicate]
  25. Why isn’t position:sticky with left:0 working inside a scrollable container?
  26. Chrome does not expand flex parent according to children’s content [duplicate]
  27. Flexbox with fixed header and footer and scrollable content
  28. What are the default values for justify-content & align content?
  29. Make flex container take width of content, not width 100%
  30. justify-content: space-between failing to align elements as expected

Leave a Comment