Absolutely positioning with flexbox in Safari

css, flexbox, safari

Solution

Because `position: absolute;` break `display: flex`, use `transform: translate` instead

    .container {
      position: relative;
      width: 15rem;
      height: 15rem;
      border-radius: 50%;
      background-color: blue;
    }

    .container div {
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

    .inner-one {
      width: 13rem;
      height: 13rem;
      background-color: green;
    }

    .inner-two {
      width: 11rem;
      height: 11rem;
      background-color: purple;
    }

    <div class="container">
      <div class="inner-one"></div>
      <div class="inner-two"></div>
    </div>

Or give the inner elements a left/top value

    .container {
      width: 15rem;
      height: 15rem;
      border-radius: 50%;
      background-color: blue;

      display: flex;
      align-items: center;
      justify-content: center;
    }

    .container div {
      border-radius: 50%;
      position: absolute;
    }

    .inner-one {
      left: 1.5rem;
      top: 1.5rem;
      width: 13rem;
      height: 13rem;
      background-color: green;
    }

    .inner-two {
      left: 2.5rem;
      top: 2.5rem;
      width: 11rem;
      height: 11rem;
      background-color: purple;
    }

<div class="container">
      <div class="inner-one"></div>
      <div class="inner-two"></div>
</div>

Problem

Safari has full support for FlexBox according to caniuse. I am simply trying to stack some differently sized div's on top of each other using flexbox. I am genuinely curious as to why this works in Chrome/Firefox but not in Safari: ``` <div class="container"> <div class="inner-one"></div> <div class="inner-two"></div> </div> ``` ``` .container { width: 15rem; height: 15rem; border-radius: 50%; background-color: blue; display: flex; align-items: center; justify-content: center; } .container div { position: absolute; } .inner-one { width: 13rem; height: 13rem; border-radius: 50%; background-color: green; } .inner-two { width: 11rem; height: 11rem; border-radius: 50%; background-color: purple; } ``` See JSFiddle here: https://jsfiddle.net/19n95exf/3/

Original source