Div disappearing when using transform: rotateY on parent, and position: relative on child

Question

I have set up a codepen so you can see what's happening. On the right most flip card the child div disappears as I rotate it.

https://codepen.io/McCoy101/pen/BaKNEOr

It's something to do with the position property on the child element as when I remove it works fine, however unfortunately I need position relative to position the logo div.

Also strange how it only happens on the right most div. If anyone could help or even explain why it's happening that would be great.

Thanks

McCoy

HTML:

<div id="flipcards">

  <div class="flip-card-container"><!--start card-->
    <div class="flip-card">

      <div class="flip-card-front">
        <div class="flimage">Picture
          <div class="fllogo">Logo</div>
        </div>
      </div>

      <div class="flip-card-back">
        <div class="flipbackinner">
          <p>Text here</p>
        </div>
      </div>

    </div>
  </div><!--end card-->

  <!--Repeat card 4 times-->


</div>

CSS:

#flipcards {
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
}

.flip-card-container {
    width:260px;
    height:390px;
    perspective:600px;
    text-align:center;
    margin-bottom:35px;
}
.flip-card {
    position:relative;
    width:100%;
    height:100%;
    transition:transform 5s;
    transform-style:preserve-3d;
}
.flip-card-container:hover .flip-card {
    transform:rotateY(180deg);
}
.flip-card-front, .flip-card-back {
    position:absolute;
    width:100%;
    height:100%;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
}
.flip-card-front {
    background-color:#324C9A;
}
.flip-card-back {
    background-color:#3C5AB5;
    transform:rotateY(180deg);
}
.flimage {
    border:2px solid #FFF;
    margin:13px 13px 0px;
    position:relative;
  background-color:red;
  height:300px;
}
.fllogo {
  width:70px;
  height:70px;
  position:absolute;
  top:0px;
  right:0px;
  background-color:yellow;
}

Answer 1

You just have to add

-webkit-backface-visibility:hidden;
backface-visibility:hidden;

to the positionned elements, so .flimage and .fllogo