Flex / Grid layouts not working on button or fieldset elements

flexbox known issues
add margin between flex elements
display: flex not working
firefox flex bug
flexbox buttons
align button with flex
flexbox layout examples
flex-end not working

I'm trying to center inner elements of a <button>-tag with flexbox's justify-content: center. But Safari does not center them. I can apply the same style to any other tags and it works as intended (see the <p>-tag). Only the button is left-aligned.

Try Firefox or Chrome and you can see the difference.

Is there any user agent style I have to overwrite? Or any other solution to this problem?

div {
  display: flex;
  flex-direction: column;
  width: 100%;
}
button, p {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
<div>
  <button>
    <span>Test</span>
    <span>Test</span>
  </button>
  <p>
    <span>Test</span>
    <span>Test</span>
  </p>
</div>

How can I use display: grid on button elements?, Flex / Grid layouts not working on button or fieldset elements (3 answers) I'd also recommend updating grid-template-columns: auto 1fr; This will allow font-​size: 1em; } .button { display: grid; justify-content: left; align-items:  Flexbox Flex / Grid layouts not working on button or fieldset elements. Flexbox not working on <button> element button or fieldset elements in Chrome / Safari. 5:


Here is my simplest hack.

button::before,
button::after {
    content: '';
    flex: 1 0 auto;
}

375693, Issue 375693: [css-flex][css-grid] Flexbox/grid layout model does not work on fieldset elements Also hit this in the real-world while attempting to use the fieldset element to It looks like this is also a problem for `<button>` with `display​: grid`. From the duplicate: The <button> element is not designed to be a flex or grid container. – Michael Benjamin Aug 21 '19 at 15:01 Acknowledged @Michael_B - a small note, there's no reference for the comment about display: grid not being designed to work on buttons, browsers just need to (and are) fixing it.


Starting Chrome 83, the button now works as inline-grid/grid/inline-flex/flex, you can see more about this new feature here

Here is a snippet(for those using Chrome 83 and up)

button {
  display: inline-flex;
  height: 2rem;
  align-items: flex-end;
  width: 4rem;
  -webkit-appearance: none;
  justify-content: flex-end;
}
<!-- 

The align-items keyword should fail in Chrome 81 or earlier, but work in Chrome 83 or later. To see the error, the button needs styles that make it more of an extrinsic container. In other words, it needs a height or width set. 
 
-->
<button>Hi</button>
<input type="button" value="Hi">

<fieldset>: The Field Set element, The HTML fieldset element is used to group several controls as well as labels As the example above shows, the <fieldset> element provides a grouping which prevent flexbox and grid layouts from being used inside a <fieldset> . <​button> · <datalist> · <fieldset> · <form> · <input> · <label> · <legend>  Flex-based dynamic layouts not supported inside freeform layouts or any other deprecated layouts If you start to mix and match flex and inline-block layout in a work object, do not use the old pzActionAreaContent in your application because this rule is a final rule and cannot be overridden in a section.


The Benefits of Using CSS Grid for Web Form Layout, Unfortunately, there are a number of problems using Flexbox for form layout. Browsers can't apply display: grid or display: flex to fieldset elements. fallback 30%/70% float layout */ input, output, textarea, select, button  If the <fieldset> is styled with display: grid or display: inline-grid, then the anonymous box will be a grid formatting context. If the <fieldset> is styled with display: flex or display: inline-flex, then the anonymous box will be a flex formatting context. Otherwise, it establishes a block formatting context.


New Perspectives on HTML 5 and CSS: Comprehensive, May not be copied, scanned, or duplicated, in whole or in part. HTML 525 fieldset HTML element that groups fields within a web form. HTML 136 fixed grid A grid layout in which the widths of the columns and margins are HTML392 flex-basis CSS property that provides the basis or initial size of the item prior to flexing. CSS grid is for two dimensional layout. Or as Rachel Andrews put it: Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns. They can be combined as well. You can turn a grid item into a flex container. You can turn a flex item into a grid.


CSS Mastery, Grid Layout, 209 nested flexbox layouts, 180 older syntaxes, 161 ordering, 179 166 of multiple elements, 167 wrapping rows, 173 Forms, 5, 27, 274 button styling, 283 custom checkboxes, 293 feedback and help texts, 285 fieldset “​unstyling”, 109 Gradients, 128 color stops, 130–131 linear-gradient() functional notation,  display:grid not working on a button element in chromium, works fine in firefox. I'm building an application with nwjs, but it still uses HTML, CSS, and JS, so I'm assuming you'll be able to help. Also, the issue with my layout appears in browsers as well.