0

I'm finding a difference in the appearance of the following code:

<html>
<style>
#outer{
    display:flex;
    border: 2px solid #73AD21;
    width:50%;
    height:25%;
}
#b1{
    display:flex; /*I don't want to edit this, but it is the cause of inconsistency*/
    flex:1;
}
#b2{
    display:inline;
    flex:1;
}
</style>
<head>
</head>
<body>
<div id=outer>
    <button id=b1>hi</button>
    <button id=b2>hello</button>
</div>
</body>
</html>

I would like the text in b1 to be centered like firefox in all three browsers, but I do not want to change the line indicated. I want the element to be able to remain "flex:display". How do I do this?

flexbox browser comparison

Order of browsers displayed above: Firefox, IE, Chrome.

Versions: Firefox 46.0.1, IE 11.0.9600, Crhome 50.0.2661.94.

ADJenks
  • 2,973
  • 27
  • 38
  • It's not an "exact duplicate" but I guess it sort of answers my question. – ADJenks May 05 '16 at 19:01
  • 1
    The problem is you're making a `button` element a flex container. This doesn't work in most browsers, because they don't allow changes to the `display` property on this element. The solution in the dupe provides an effective cross-browser solution. How is this not an exact duplicate? – Michael Benjamin May 05 '16 at 19:08
  • Yes. You are correct, it is a duplicate, they are both centering issues involving the display property being incorrectly applied to a button. Thank you for showing me this question, I wish I had found it myself, it helped. Thanks again. – ADJenks May 05 '16 at 19:27

0 Answers0