[css-flexbox] flex layout support for <button>

[jonkoops]

I've been running into an interop issue between browsers when it comes to using flexbox in combination with the button element. According to the specification the display property "Applies to: all elements". But it looks like some browsers are not adhering to this due to inconsistencies in their implementation of the button element.

Test case:

<style>
  button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 0;
    background-color: blue;
  }

  .square {
    width: 32px;
    height: 32px;
    background-color: red;
  }
</style>
<button type="button">
  <div class="square"></div>
</button>

Expected result:

Test results:

Browser	Result	Pass	Bug tracker link
Chrome 54		👍	#262679 (fixed)
Safari 10.0.1		👎	#148826
Firefox 50		👎	#984869, #1230207 (fixed)
Edge 38		👍	Not available
IE 11		👍	Not available

Some of the links are about the fieldset element, but still contain useful information.

Related links:

• [css-display-3] grid/flex layout support for <fieldset> #321
• Stack Overflow - Center element within button on both axis using Flexbox
• Stack Overflow - Flexbox not working on element in some browsers
• Flexbugs - Community-curated list of flexbox issues and cross-browser workarounds

[karlcow]

• Working in Firefox Nightly 53.0a1 (2016-11-29) (64-bit). 👍
• Working in Firefox Dev Edition 52.0a2 (2016-11-22) (64-bit) 👍
• not working in Safari Developer Preview Release 18 (Safari 10.1, WebKit 12603.1.12)
  ping @jonathandavis https://twitter.com/jonathandavis

http://codepen.io/webcompat/pen/xRPZBy

[karlcow]

http://twitter.com/webcompat/status/803759981547794435

[MatsPalmgren]

FYI, Firefox 52 and later supports grid, flexbox and multi-column layout inside <button>.
Implemented here:
https://bugzilla.mozilla.org/show_bug.cgi?id=984869

[jonkoops]

That's great. Now we just need the Safari team on board and this should no longer be a problem in any major browser.

[jdatapple]

I've noted this with the WebKit team. Looks like this issue: https://bugs.webkit.org/show_bug.cgi?id=148872

[fantasai]

Closing, as this is an implementation bug not a spec bug. :)