UP | HOME

Button cannot be a flex container

Table of Contents

1 The problem

Let's say, we have a button like this, we use flexbox to make the content centered:

┌────────────────┐
│     Hello      │
└────────────────┘
<button class="btn">Hello</button>

.btn {
  @include display-flex;
  @include align-items(flex-start);
  @include justify-content(center);
}

But the damn thing doesn't look like that on older browsers like Safari 10. It looks like this:

┌────────────────┐
│ Hello          │
└────────────────┘

We know there is something wrong with flexbox, but what is it?

2 The reason

Knowing the issue may come from flexbox, we can check the Flexbugs repository, there actually a known issue: Button cannot be a flex container. And that's why the CSS rules for centering content didn't work.

3 The solution

To fix this, there are a lot of way. I want to minimize the changes, so, replacing button tag with something else, for example, a tag, would be a good fix.

<a class="btn">Hello</a>

.btn { /* no css change */
  @include display-flex;
  @include align-items(flex-start);
  @include justify-content(center);
}

Date: 2019-02-19 Tue 00:00

Author: Huy Tran

Created: 2019-04-22 Mon 14:41