Button-group and flex classes not aligning correctly due to clearfix

[janinaeb]

What should happen?

If using flex classes like .align-justify on a .button-group the buttons should spread evenly within its containers width.

What happens instead?

The clearfix in :before/:after takes space and the buttons are not aligned properly.
See error in the documentation example: Flex Button Group

Possible Solution

The issue is probably a result of moving the clearfix to after the @if that disables the clearfix. Solution would be to add !important to scss/components/_button-group.scss:46 or strengthen the selector in some way.

  @if $global-flexbox {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    flex-grow: 1;
    &::before,
    &::after {
      display: none !important; // Disable clearfix
    }
  }

Test Case and/or Steps to Reproduce (for bugs)

Test Case: https://get.foundation/sites/docs/button-group.html#flexbox-button-group (spaced and justify)

Your Environment

• Foundation version(s) used: 6.9.0

Checklist

• I have read and follow the CONTRIBUTING.md document.
• There are no other issues similar to this one.
• The issue title and template are correctly filled.