6

I'm having some problem with display: flex in both Safari and iOS Safari. Safari has alignment issues and iOS Safari has both alignment and size issues. Is this expected or a valid bug in Safari?

Edit: Also, height in percentage on the child SVG inside the Button does not work either. This works in all other browsers. I mane another more advanced example with SVG elements, and I added an anchor to compare to the button. More advanced example here

My simple example

HTML:
<div class="flex">
  <div class="col col-1">
    <button class="sub-col">
      <span class="span"></span>
    </button>
    <div class="sub-col">2</div>
    <div class="sub-col">3</div>
  </div>
  <div class="col col-2"></div>
  <div class="col col-3"></div>
</div>


CSS:
.flex {
  display: flex;
  flex-direction: column;
  height: 80vh;
  background: #666666;
  position: fixed;
  width: 100%;
}

.col {
  display: inherit;
  flex: 1 1 auto;
  background: #ccffcc;
}
.col-1 {
  flex: 0 0 10vh;
  background: #ffcccc;
}
.col-3 {
  flex: 0 0 10vh;
  background: #ccccff;
}

.sub-col {
  display: inherit;
  flex: 0 0 25%;
  justify-content: center;
  align-items: center;
}

.span {
  width: 10px;
  height: 10px;
  background: #ffaaaa;
}

Screenshots:

This is what it should look like, and does in Chrome, FF and Edge (Haven't tested IE)

Chome, FF and Edge

This is what it looks like in Safari

Safari Desktop

And this is iOS Safari

iOS Safari

Jompis
  • 640
  • 1
  • 8
  • 18
  • Possible duplicate of [Flexbox not working on – Flimm Jun 23 '17 at 16:17

2 Answers2

12

You can't set display flex to button and fieldset elements. chk below link. Wrap your element with div or span tags

https://github.com/philipwalton/flexbugs#9-some-html-elements-cant-be-flex-containers

Flimm
  • 136,138
  • 45
  • 251
  • 267
Naren Srinivasan S
  • 350
  • 3
  • 7
  • I see, must have missed that when I skimmed through that page. I've already switched to a-tags instead. Unfortunately there are more issues though. Maybe using Flexbox is not the best idea. – Jompis Jun 01 '17 at 10:49
  • Can you describe the issues? Perhaps I could be of some help. – Chris Elioglou Jun 01 '17 at 11:24
7

The button element, and a couple other elements for that matter, cannot be flex containers in some browsers. Safari is one of them.

You can try a simple solution though, if you like. The idea is, you wrap your .span inside .span-wrapper. Then you let .span-wrapper be your flex container.

Like that:

HTML:

<div class="flex">
  <div class="col col-1">
    <button class="sub-col">
      <span class="span-wrapper">
        <span class="span"></span>
      </span>
    </button>
    <div class="sub-col">2</div>
    <div class="sub-col">3</div>
  </div>
  <div class="col col-2"></div>
  <div class="col col-3"></div>
</div>

CSS:

.flex {
  display: flex;
  flex-direction: column;
  height: 80vh;
  background: #666666;
  position: fixed;
  width: 100%;
}

.col {
  display: inherit;
  flex: 1 1 auto;
  background: #ccffcc;
}
.col-1 {
  flex: 0 0 10vh;
  background: #ffcccc;
}
.col-3 {
  flex: 0 0 10vh;
  background: #ccccff;
}

.sub-col {
  display: inherit;
  flex: 0 0 25%;
  justify-content: center;
  align-items: center;
}

.span {
  width: 10px;
  height: 10px;
  background: #ffaaaa;
}

.span-wrapper {
  display: flex;
  flex-basis: 100%;
  justify-content: center;
  align-items: center;
}
Chris Elioglou
  • 611
  • 1
  • 6
  • 7
  • I ended up switching to hyperlinks instead. So now I'm trying to figure out why height/max-height in percentage for the child SVG element is not working in Safari. 2 steps forwards, 1 step back... – Jompis Jun 01 '17 at 10:52