【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的居中不生效的问题，网上的解决方案一般是在父元素上在套一个盒子，外层盒子使用绝对定位内层盒子使用flex布局，但是仔细想想，其实不用这么麻烦。

更简单的解决方案

父元素设置了绝对定位之后，如果没有宽度，父元素宽度为0，如果有子元素，父元素宽度就会和子元素宽度一致，那么这个时候在父元素中想使用flex布局当然不生效呀，所以只需要给父元素再加一个宽度就可以了

设置为relative也失效的问题

那么我的问题和这个一样么？本来我以为是一样的，但是父元素设置relative后，不会改变父元素的宽度呀，并且自己在chrom下和更高版本的firefox下尝试了下都么有这个问题，那可能就是firefox56的问题了？