Flex / Grid layouts not working on button or fieldset elements

The 'why' behind stubborn elements

Safety instructions on, because in the universe of HTML, some elements act like stiff robots. They have inherent display properties that refuse to groove with flex or grid layouts. Ever-stubborn <button> and <fieldset> are particularly good at this dawdle. For them, user agent stylesheets are the stage-managers that outline their default clothing style, often limiting the influence of flex or grid properties. While dealing with these elements, overriding or resetting these styles becomes the golden ticket due to the risk of unexpected scrollbars or sideways breakdance moves (layouts not taking effect).

Using the puppet-master: Span

Giving <button> the crown of a flex container often results in chaos. Instead, call our friend <span> into the scene. Place it inside your <button> thus promising you the center stage spotlight (alignment and centering) you were trying to achieve:

<button>
  <span class="btn-content">Click Me</span>
</button>


.btn-content {
  display: flex;
  justify-content: center; /* Time to get some center-spotlight */
  align-items: center; /* Because we enjoy vertical symmetry */
}


Conquering the browser-terrain

Web developers walk on tight ropes, always juggling between different browser versions and compatibility challenges. Chrome, from version 83, became supportive and allowed flex and grid to impose on buttons. However, its older siblings and cousins refuse to be so compliant:

button {
  display: inline-flex; /* Flex comes alive in modern browsers */
  width: auto;  /* Ensuring the button doesn't shrink into oblivion */
  height: auto; /* Giving the button some breathing space */
}


Browsers like Safari, sometimes act like rebellious teens, refusing to fully respect the flex layout. In such cases, you need to sneak in invisible flex items. Call it unfair, but it works:

button::before,
button::after {
  content: ''; /* Invisible ninjas */
  flex: 1;  /* Sharing space evenly, because we're democratic */
}


Through this tiny James Bond operation, the contents of your button end up beautifully centered, dodging Safari's rebellious tendencies.

Flexing and Gridding on buttons like a pro

Display properties: Tricky little beasts

Before setting display: flex or grid on a <button>, remember that flexbox affects the contents but does not necessarily establish a new flex context for the button. A small difference but a major plot-twist in the CSS drama.

Using pseudo-elements to your advantage

If your buttons are behaving like stubborn teenagers, refusing to center content, welcome pseudo-elements into the mix:

button::before {
  content: '';
  margin-right: auto; /* Makes space, and pushes content to the center */
}

button::after {
  content: '';
  margin-left: auto;  /* Balances the equation by making equal space on the right */
}


Overflow: Handle with care

Are you the developer that liberally uses overflow: scroll on buttons worried about the content binge-eating into space? Not a great move as it can lead to unwanted scrollbars. A smarter move is to be vigilant about content size and padding inside the button. Use overflow as a last resort, not your go-to defensive move.