3

I'm looking to use Flexbox to align an svg and the text within a button and all is working well in Chrome and Safari, but in Firefox there seems to be a problem.

This codepen should demonstrate the problem live. Please note that I am pulling in https://github.com/mastastealth/sass-flex-mixin/blob/master/_flex.scss as an external CSS sheet in the codepen.

http://codepen.io/dominicchapman/pen/EgNgoq

SCSS as follows:

.Button {
  border: 0 none;
    height: 32px;
    padding: 0 16px;
    font-size: 14px;
    background-color: orange;
    color: white;

  .Icon {
        fill: white; 
    }

    &:hover, &:active {
        background: red;
    }
}

.Button__icon {
  @include inline-flex;
  @include align-items(center);
  .Icon {
    margin-right: 11px;
    height:16px;
    width:6px
  }
}

Any help would be greatly appreciated. Thanks in advance.

Dominic
  • 33
  • 1
  • 4
  • 1
    It seems [this was already asked](http://stackoverflow.com/q/35464067/1529630). I won't close right now in case I misunderstood the problem, I don't have other browsers at hand to compare the result. – Oriol Sep 20 '16 at 17:19

1 Answers1

5

The problem is that Firefox does not fully support flexbox in <button> elements.

It's strange because the child boxes are blockified, and that's why you see the contents in different lines. However, the button does not seem to establish a flex formatting context. All flex properties are ignored.

I would understand not supporting flexbox on buttons, but IMO this strange mix is nonsense. However, mozilla people didn't see any problem.

Luckily they reconsidered and bug 984869 was reopened. But no work is actively been done on it.

Oriol
  • 274,082
  • 63
  • 437
  • 513
  • "However, mozilla people didn't see any problem." Yep, Mozilla is known to deviate from the standard simply because they can. (I mean, *everyone* does that, but Moz's reason isn't "screw the spec" as is the case with the others, but rather "the spec lets me do whatever I want". And boy do they *milk* that freedom.) – BoltClock Sep 20 '16 at 17:18
  • @BoltClock Yes, they say "That's a bit hand-wavy", "The spec on all this stuff is basically nonexistent", ... – Oriol Sep 20 '16 at 17:21