Absolutely positioning with flexbox in Safari

Question

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 genuinel

Answer 1

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>