【flex布局】关于"同一元素设置absolute之后flex不生效"的问题

今天碰到个问题，在firefox56下，同一元素同时设置position:relative和display:flex之后，flex居然不生效了，感觉很奇怪，百度了发现，有很多小伙伴碰到的是“同一元素设置absolute之后flex不生效”的问题，于是自己试了下，想看看是不是同一个原因。

“同一元素设置absolute之后flex不生效”

HTML代码

  <div class="parent">
    <div class="child"></div>
  </div>

CSS代码

 .parent{
      position: absolute;
      display: flex;
      justify-content: center;
      align-items: center;
      /* width: 100%; */
      height: 500px;
      border: plum solid 1px;
    }
 .child{
      width: 100px;
      height: 100px;
      background: pink;
    }

效果如下

以下就把class='parent’的元素称为父元素，class=‘child’的元素称为子元素

的确出现了flex的居中不生效的问题，网上的解决方案一般是在父元素上在套一个盒子，外层盒子使