Popover is not placed properly inside flex container

[mrin9]

Steps to reproduce

Which browser?

All

What is expected?

Popover should be placed in correct position (aligned to the calling element)

What is actually happening?

Position of popover is way off

Reproduction Link

JS-Bin test case

<template>
  <div style="display:flex; flex-direction:column; width:500px; height:300px;  border:2px solid green;padding:10px"> <!-- Parent flex container -->
    Parent flex container
    <div style="overflow:auto; border:2px solid blue; padding:10px"> <!-- Child  flex container -->
      Child container
      <br/><br/>Scroll...<br/><br/><br/><br/><br/><br/>
      <br/><br/>Scroll...<br/><br/><br/><br/><br/><br/>
      <br/><br/>Scroll...<br/><br/><br/><br/><br/><br/>
      <span> Delete everything ? </span>
      <at-popover placement="bottom" v-model="show" @toggle="show=!show;">
        <at-button size="small" type="error">Delete</at-button>
        <template slot="content">
          <p>Are you sure to delete?</p>
        </template>
      </at-popover>
    </div>
  </div>
</template>

<script>
export default {
  data:function(){
    return {
      show:false
    }
  }
}
</script>

[Cengkaruk]

Any update on this bug?