[csswg-drafts] [css-display-3] flex layout support for <button>

jonkoops has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css-display-3] flex layout support for <button> ==
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](http://www.w3.org/TR/CSS21/visuren.html#display-prop) 
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:**

```html
<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:**

![expected](https://cloud.githubusercontent.com/assets/695720/20403099/bbadcfaa-acff-11e6-8dab-b5eb16d9da55.png)

**Test results:**

| Browser | Result | Pass | Bug tracker link |
| --- | --- | --- | --- |
| Chrome 54 | 
![chrome](https://cloud.githubusercontent.com/assets/695720/20403135/ddfe5c28-acff-11e6-98e1-15c64edc332e.png)
 | 👍 | [#262679 
(fixed)](https://code.google.com/p/chromium/issues/detail?id=262679) |
| Safari 10.0.1 | 
![safari](https://cloud.githubusercontent.com/assets/695720/20403149/f40cd7f6-acff-11e6-85ff-0112d356db2f.png)
 | 👎 | [#148826](https://bugs.webkit.org/show_bug.cgi?id=148826) |
| Firefox 50 | 
![firefox](https://cloud.githubusercontent.com/assets/695720/20403157/011864f6-ad00-11e6-9b7d-5cddf04dc3d7.png)
 | 👎 | [#984869](https://bugzilla.mozilla.org/show_bug.cgi?id=984869),
 [#1230207 
(fixed)](https://bugzilla.mozilla.org/show_bug.cgi?id=1230207) |
| Edge 38 | 
![edge](https://cloud.githubusercontent.com/assets/695720/20403183/1f20c1e6-ad00-11e6-93f0-ee766766c67c.png)
 | 👍 | Not available |
| IE 11 | 
![ie](https://cloud.githubusercontent.com/assets/695720/20403200/2e841ae8-ad00-11e6-8a01-a7447bb26ef1.png)
 | 👍 | Not available |

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

**Related links:**
- https://github.com/w3c/csswg-drafts/issues/321
- [Stack Overflow - Center element within button on both axis using 
Flexbox](https://stackoverflow.com/questions/40660872/center-element-within-button-on-both-axis-using-flexbox)
- [Stack Overflow - Flexbox not working on <button> element in some 
browsers](https://stackoverflow.com/questions/35464067/flexbox-not-working-on-button-element-in-some-browsers)
- [Flexbugs - Community-curated list of flexbox issues and 
cross-browser 
workarounds](https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers)

Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/730 using your GitHub 
account

Received on Thursday, 17 November 2016 19:28:16 UTC