1

I've been reading about inconsistency of flexbox across browsers lately and I ended focusing on this particular example: making buttons flex containers.

It is a long known bug and there are some workarounds:

So, based on those links ^^ I expected to find some weird behaviours.

Example 1:

.one {
  height: 100px;
  width: 200px;
  border: 1px solid black;
}

.two {
  height: 100%;
  width: 100%;
  background: red;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.three {
  flex-grow: 1;
  background: yellow;
}
<div class="one">
 <button class="two">
  <span class="three">
   Hello
  </span>
 </button>
</div>

What I don't understand about example 1 is that if you remove align-items: stretch; the yellow span doesn't stretch by default across the cross axis (here horizontal axis) on Chrome and Safari but does on Firefox.

Example 2:

.one {
  height: 100px;
  width: 200px;
  border: 1px solid black;
}

.two {
  height: 100%;
  width: 100%;
  background: red;
  display: flex;
  flex-direction: column;
}

.three {
  flex-grow: 1;
  background: yellow;
}
<div class="one">
 <button class="two">
  <span class="three">
   Hello
  </span>
 </button>
</div>

As expected, example 2 doesn't stretch the yellow button horizontally on Chrome and Safari but does on Firefox.

According to the W3C standards https://www.w3.org/TR/css-align-3/#align-items-property the default value for align-items is stretch (or normal which, I think, does more of less the same thing in this context) for all elements.

What I found is that the default value of align-items for buttons in Safari and Chrome is flex-start. For Firefox, it is normal.

My question is: why don't Safari and Chrome respect the standard for the default value of align-items ?

Since they both share the value flex-start it might be a webkit thing but still doesn't explain why.

User agent style for buttons in Chrome

PS1: I am using

  • Chrome 79.0.3945.79
  • Safari 12.1.1
  • Firefox 70.0.1

PS2: FYI if I make it a flex container row even applying align-items: stretch; won't make a difference, still doesn't stretch across the cross axis but I would think that's because buttons are bad flex-containers: https://jsfiddle.net/jimousse/9by4zg32/1/

jimousse
  • 37
  • 1
  • 8
  • Default UA styles doesn't have to be the same, Exactly the same for properties that each browser support, you might say `Why this browser doesn't support this property?` i think this sort of questions should be directed to the browser support. – Rainbow Dec 23 '19 at 11:10
  • There are so many differences in defaults between browsers. That's why reset stylesheets exist. But yes, buttons do make bad flex containers. Have you tried `appearance:none`? – Mr Lister Dec 23 '19 at 12:10
  • @MrLister you mean like this: https://jsfiddle.net/jimousse/9by4zg32/11/ ? Doesn't to work :( – jimousse Dec 23 '19 at 13:20
  • I think this is a bug in Webkit (and Blink) https://codepen.io/scheinercc/pen/ZEGwpKb – retrovertigo Mar 30 '20 at 02:01
  • I filed this for Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=1065752 and also found this for Webkit https://bugs.webkit.org/show_bug.cgi?id=177503 – retrovertigo Mar 30 '20 at 02:13

0 Answers0