Flexbox not working on button or fieldset elements

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

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>

And a jsfiddle:
http://jsfiddle.net/z3sfwtn2/2/

edited Sep 7 '17 at 15:21

Michael_B

158k50255363

asked Feb 17 '16 at 17:49

Ingemar

8431715

Similar issue: Why can't <fieldset> be flex containers?

– Oriol
Sep 20 '16 at 17:23

add a comment |

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>

And a jsfiddle:
http://jsfiddle.net/z3sfwtn2/2/

edited Sep 7 '17 at 15:21

Michael_B

158k50255363

asked Feb 17 '16 at 17:49

Ingemar

8431715

Similar issue: Why can't <fieldset> be flex containers?

– Oriol
Sep 20 '16 at 17:23

add a comment |

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>

And a jsfiddle:
http://jsfiddle.net/z3sfwtn2/2/

edited Sep 7 '17 at 15:21

Michael_B

158k50255363

asked Feb 17 '16 at 17:49

Ingemar

8431715

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>

And a jsfiddle:
http://jsfiddle.net/z3sfwtn2/2/

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>

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>

html css css3 safari flexbox

edited Sep 7 '17 at 15:21

Michael_B

158k50255363

asked Feb 17 '16 at 17:49

Ingemar

8431715

edited Sep 7 '17 at 15:21

Michael_B

158k50255363

asked Feb 17 '16 at 17:49

Ingemar

8431715

edited Sep 7 '17 at 15:21

Michael_B

158k50255363

edited Sep 7 '17 at 15:21

Michael_B

158k50255363

edited Sep 7 '17 at 15:21

Michael_B

158k50255363

asked Feb 17 '16 at 17:49

Ingemar

8431715

asked Feb 17 '16 at 17:49

Ingemar

8431715

asked Feb 17 '16 at 17:49

Ingemar

8431715

Similar issue: Why can't <fieldset> be flex containers?

– Oriol
Sep 20 '16 at 17:23

add a comment |

Similar issue: Why can't <fieldset> be flex containers?

– Oriol
Sep 20 '16 at 17:23

Similar issue: Why can't <fieldset> be flex containers?

– Oriol
Sep 20 '16 at 17:23

add a comment |

2 Answers
2

active

oldest

votes

101

The problem is that the <button> element is not designed to be a flex (or grid) container.

At the time of this writing, Webkit-based browsers (Chrome and Safari) adhere to this design principle. Firefox and Edge do not. I didn't test other browsers.

Therefore, you should have no problem making a <button> element a flex (or grid) container in Firefox and Edge. But don't expect it to work in Chrome or Safari.

This behavior currently applies to at least three elements:

<button>

<fieldset>

<legend>

I'm theorizing, but I believe that the idea is to maintain a level of common sense when styling HTML elements. For instance, the HTML gods wanted to prevent authors from turning a button into a table.

However, at least in this case, there is a simple and easy workaround:

Wrap the content of the button in a span, and make the span the flex container.

Adjusted HTML (wrapped button content in a span)

<div>

    <button>

        <span><!-- using a div also works but is not valid HTML -->

            <span>Test</span>

            <span>Test</span>

        </span>

    </button>

    <p>

        <span>Test</span>

        <span>Test</span>

    </p>

</div>

Adjusted CSS (targeted span)

button > span, p {

    display: flex;

    flex-direction: row;

    justify-content: center;

}

Revised Demo

NOTE: Although they cannot be flex containers, button elements can be flex items.

References:

Bug 984869 - display: flex doesn't work for button elements

Bug 1176786 - Flexbox on a blockifies the contents but doesn't establish a flex formatting context

Bug #10 - Some HTML elements can't be grid containers

edited Jun 28 '18 at 11:56

answered Feb 17 '16 at 19:43

Michael_B

158k50255363

1

Apple knows best!

– Toni Leigh
Jul 24 '17 at 9:03

1

THANKS A LOT! You save me a LOT of time with that workaround. Cheers!

– R.D.
Mar 1 '18 at 6:57

3

I get why it might not work for <button>s, but why on earth is it not working for <fieldset> either? Shouldn't that element be considered a regular block level element that is valid for a flex container?

– fritzmg
Dec 7 '18 at 13:32

3

@fritzmg. Agreed. The rule probably pre-exists CSS3 technologies, such as Flex and Grid, and should be re-evaluated.

– Michael_B
Dec 7 '18 at 13:55

add a comment |

Here is my simplest hack.

button::before,

button::after {

    content: '';

    flex: 1 0 auto;

}

answered Nov 8 '16 at 9:39

Igari Takeharu

17123

Awesome, thanks.

– Jeff Huijsmans
Dec 5 '16 at 11:09

6

does not work in firefox though

– Stephan Hoyer
Feb 18 '17 at 16:03

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f35464067%2fflexbox-not-working-on-button-or-fieldset-elements%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

101

The problem is that the <button> element is not designed to be a flex (or grid) container.

At the time of this writing, Webkit-based browsers (Chrome and Safari) adhere to this design principle. Firefox and Edge do not. I didn't test other browsers.

Therefore, you should have no problem making a <button> element a flex (or grid) container in Firefox and Edge. But don't expect it to work in Chrome or Safari.

This behavior currently applies to at least three elements:

<button>

<fieldset>

<legend>

However, at least in this case, there is a simple and easy workaround:

Wrap the content of the button in a span, and make the span the flex container.

Adjusted HTML (wrapped button content in a span)

<div>

    <button>

        <span><!-- using a div also works but is not valid HTML -->

            <span>Test</span>

            <span>Test</span>

        </span>

    </button>

    <p>

        <span>Test</span>

        <span>Test</span>

    </p>

</div>

Adjusted CSS (targeted span)

button > span, p {

    display: flex;

    flex-direction: row;

    justify-content: center;

}

Revised Demo

NOTE: Although they cannot be flex containers, button elements can be flex items.

References:

Bug 984869 - display: flex doesn't work for button elements

Bug 1176786 - Flexbox on a blockifies the contents but doesn't establish a flex formatting context

Bug #10 - Some HTML elements can't be grid containers

edited Jun 28 '18 at 11:56

answered Feb 17 '16 at 19:43

Michael_B

158k50255363

1

Apple knows best!

– Toni Leigh
Jul 24 '17 at 9:03

1

THANKS A LOT! You save me a LOT of time with that workaround. Cheers!

– R.D.
Mar 1 '18 at 6:57

3

I get why it might not work for <button>s, but why on earth is it not working for <fieldset> either? Shouldn't that element be considered a regular block level element that is valid for a flex container?

– fritzmg
Dec 7 '18 at 13:32

3

@fritzmg. Agreed. The rule probably pre-exists CSS3 technologies, such as Flex and Grid, and should be re-evaluated.

– Michael_B
Dec 7 '18 at 13:55

add a comment |

101

The problem is that the <button> element is not designed to be a flex (or grid) container.

At the time of this writing, Webkit-based browsers (Chrome and Safari) adhere to this design principle. Firefox and Edge do not. I didn't test other browsers.

Therefore, you should have no problem making a <button> element a flex (or grid) container in Firefox and Edge. But don't expect it to work in Chrome or Safari.

This behavior currently applies to at least three elements:

<button>

<fieldset>

<legend>

However, at least in this case, there is a simple and easy workaround:

Wrap the content of the button in a span, and make the span the flex container.

Adjusted HTML (wrapped button content in a span)

<div>

    <button>

        <span><!-- using a div also works but is not valid HTML -->

            <span>Test</span>

            <span>Test</span>

        </span>

    </button>

    <p>

        <span>Test</span>

        <span>Test</span>

    </p>

</div>

Adjusted CSS (targeted span)

button > span, p {

    display: flex;

    flex-direction: row;

    justify-content: center;

}

Revised Demo

NOTE: Although they cannot be flex containers, button elements can be flex items.

References:

Bug 984869 - display: flex doesn't work for button elements

Bug 1176786 - Flexbox on a blockifies the contents but doesn't establish a flex formatting context

Bug #10 - Some HTML elements can't be grid containers

edited Jun 28 '18 at 11:56

answered Feb 17 '16 at 19:43

Michael_B

158k50255363

1

Apple knows best!

– Toni Leigh
Jul 24 '17 at 9:03

1

THANKS A LOT! You save me a LOT of time with that workaround. Cheers!

– R.D.
Mar 1 '18 at 6:57

3

I get why it might not work for <button>s, but why on earth is it not working for <fieldset> either? Shouldn't that element be considered a regular block level element that is valid for a flex container?

– fritzmg
Dec 7 '18 at 13:32

3

@fritzmg. Agreed. The rule probably pre-exists CSS3 technologies, such as Flex and Grid, and should be re-evaluated.

– Michael_B
Dec 7 '18 at 13:55

add a comment |

101

The problem is that the <button> element is not designed to be a flex (or grid) container.

At the time of this writing, Webkit-based browsers (Chrome and Safari) adhere to this design principle. Firefox and Edge do not. I didn't test other browsers.

Therefore, you should have no problem making a <button> element a flex (or grid) container in Firefox and Edge. But don't expect it to work in Chrome or Safari.

This behavior currently applies to at least three elements:

<button>

<fieldset>

<legend>

However, at least in this case, there is a simple and easy workaround:

Wrap the content of the button in a span, and make the span the flex container.

Adjusted HTML (wrapped button content in a span)

<div>

    <button>

        <span><!-- using a div also works but is not valid HTML -->

            <span>Test</span>

            <span>Test</span>

        </span>

    </button>

    <p>

        <span>Test</span>

        <span>Test</span>

    </p>

</div>

Adjusted CSS (targeted span)

button > span, p {

    display: flex;

    flex-direction: row;

    justify-content: center;

}

Revised Demo

NOTE: Although they cannot be flex containers, button elements can be flex items.

References:

Bug 984869 - display: flex doesn't work for button elements

Bug 1176786 - Flexbox on a blockifies the contents but doesn't establish a flex formatting context

Bug #10 - Some HTML elements can't be grid containers

edited Jun 28 '18 at 11:56

answered Feb 17 '16 at 19:43

Michael_B

158k50255363

The problem is that the <button> element is not designed to be a flex (or grid) container.

At the time of this writing, Webkit-based browsers (Chrome and Safari) adhere to this design principle. Firefox and Edge do not. I didn't test other browsers.

Therefore, you should have no problem making a <button> element a flex (or grid) container in Firefox and Edge. But don't expect it to work in Chrome or Safari.

This behavior currently applies to at least three elements:

<button>

<fieldset>

<legend>

However, at least in this case, there is a simple and easy workaround:

Wrap the content of the button in a span, and make the span the flex container.

Adjusted HTML (wrapped button content in a span)

<div>

    <button>

        <span><!-- using a div also works but is not valid HTML -->

            <span>Test</span>

            <span>Test</span>

        </span>

    </button>

    <p>

        <span>Test</span>

        <span>Test</span>

    </p>

</div>

Adjusted CSS (targeted span)

button > span, p {

    display: flex;

    flex-direction: row;

    justify-content: center;

}

Revised Demo

NOTE: Although they cannot be flex containers, button elements can be flex items.

References:

Bug 984869 - display: flex doesn't work for button elements

Bug 1176786 - Flexbox on a blockifies the contents but doesn't establish a flex formatting context

Bug #10 - Some HTML elements can't be grid containers

edited Jun 28 '18 at 11:56

answered Feb 17 '16 at 19:43

Michael_B

158k50255363

edited Jun 28 '18 at 11:56

answered Feb 17 '16 at 19:43

Michael_B

158k50255363

answered Feb 17 '16 at 19:43

Michael_B

158k50255363

answered Feb 17 '16 at 19:43

Michael_B

158k50255363

1

Apple knows best!

– Toni Leigh
Jul 24 '17 at 9:03

1

THANKS A LOT! You save me a LOT of time with that workaround. Cheers!

– R.D.
Mar 1 '18 at 6:57

3

I get why it might not work for <button>s, but why on earth is it not working for <fieldset> either? Shouldn't that element be considered a regular block level element that is valid for a flex container?

– fritzmg
Dec 7 '18 at 13:32

3

@fritzmg. Agreed. The rule probably pre-exists CSS3 technologies, such as Flex and Grid, and should be re-evaluated.

– Michael_B
Dec 7 '18 at 13:55

add a comment |

1

Apple knows best!

– Toni Leigh
Jul 24 '17 at 9:03

1

THANKS A LOT! You save me a LOT of time with that workaround. Cheers!

– R.D.
Mar 1 '18 at 6:57

3

I get why it might not work for <button>s, but why on earth is it not working for <fieldset> either? Shouldn't that element be considered a regular block level element that is valid for a flex container?

– fritzmg
Dec 7 '18 at 13:32

3

@fritzmg. Agreed. The rule probably pre-exists CSS3 technologies, such as Flex and Grid, and should be re-evaluated.

– Michael_B
Dec 7 '18 at 13:55

Apple knows best!

– Toni Leigh
Jul 24 '17 at 9:03

THANKS A LOT! You save me a LOT of time with that workaround. Cheers!

– R.D.
Mar 1 '18 at 6:57

I get why it might not work for <button>s, but why on earth is it not working for <fieldset> either? Shouldn't that element be considered a regular block level element that is valid for a flex container?

– fritzmg
Dec 7 '18 at 13:32

@fritzmg. Agreed. The rule probably pre-exists CSS3 technologies, such as Flex and Grid, and should be re-evaluated.

– Michael_B
Dec 7 '18 at 13:55

add a comment |

Here is my simplest hack.

button::before,

button::after {

    content: '';

    flex: 1 0 auto;

}

answered Nov 8 '16 at 9:39

Igari Takeharu

17123

Awesome, thanks.

– Jeff Huijsmans
Dec 5 '16 at 11:09

6

does not work in firefox though

– Stephan Hoyer
Feb 18 '17 at 16:03

add a comment |

Here is my simplest hack.

button::before,

button::after {

    content: '';

    flex: 1 0 auto;

}

answered Nov 8 '16 at 9:39

Igari Takeharu

17123

Awesome, thanks.

– Jeff Huijsmans
Dec 5 '16 at 11:09

6

does not work in firefox though

– Stephan Hoyer
Feb 18 '17 at 16:03

add a comment |

Here is my simplest hack.

button::before,

button::after {

    content: '';

    flex: 1 0 auto;

}

answered Nov 8 '16 at 9:39

Igari Takeharu

17123

Here is my simplest hack.

button::before,

button::after {

    content: '';

    flex: 1 0 auto;

}

answered Nov 8 '16 at 9:39

Igari Takeharu

17123

answered Nov 8 '16 at 9:39

Igari Takeharu

17123

answered Nov 8 '16 at 9:39

Igari Takeharu

17123

answered Nov 8 '16 at 9:39

Igari Takeharu

17123

Awesome, thanks.

– Jeff Huijsmans
Dec 5 '16 at 11:09

6

does not work in firefox though

– Stephan Hoyer
Feb 18 '17 at 16:03

add a comment |

Awesome, thanks.

– Jeff Huijsmans
Dec 5 '16 at 11:09

6

does not work in firefox though

– Stephan Hoyer
Feb 18 '17 at 16:03

Awesome, thanks.

– Jeff Huijsmans
Dec 5 '16 at 11:09

does not work in firefox though

– Stephan Hoyer
Feb 18 '17 at 16:03

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu