1

This is a pretty specific problem... but flexbox rules don't seem to work on psuedo selector elements when the parent is a button in mobile safari and chrome.

Here is a codepen to clearly demonstrate this: http://codepen.io/anon/pen/zKaRXY

In desktop browsers, both blocks should have a "t" in the middle. In mobile browsers, only one has this "t" in the middle.

I have literally copy and pasted the full computed styles from the "div" to the "button" and it still fails for some reason.

<div class="container">
  <button class="button">
    <div class="child"></div>
  </button>

  <div class="button">
    <div class="child"></div>
  </div>
</div>



.container {
  width: 900px;
  margin: 50px auto;
  font-family: "Arial", sans-serif;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  background: #dbe8ff;
  width: 500px;
}


.child:before {
  content: "t";
  flex: 0 1 auto;
  background: #fff09b;
}
Robin van den Bogaard
  • 510
  • 2
  • 7
wlingke
  • 4,699
  • 4
  • 36
  • 52

2 Answers2

1

It's not just on mobile... Your current layout is never applying flex style to the pseudo elements.

The pseudo elements are children of the elemnt on wich they are declare. In this case, they are children of .child. So, they are grand-children of button, and your styles don't work.

If you want to style the pseudos this way, you have to set display: flex on child instead.

The reason that you see the t centered is because the dimension of child are adjusted to the dimension of the pseudo, and so this one can only be placed centered.

vals
  • 61,425
  • 11
  • 89
  • 138
0

It seems, on your second time you have copied as<div class="button"> instead of <button class="button">

ilmk
  • 599
  • 1
  • 9
  • 19
  • I think you've mis understood the question. The exact point was that the flex renders differently for
    elements vs
    – wlingke Oct 13 '16 at 17:57