flex布局中的绝对定位

昨天发现一个大问题，项目的UI开发接近尾声了，测试低版本的Safari浏览器上，flex布局有问题。具体表现是：

css

.flex {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 80px;
    height: 36px;
}
.bg {
    position: absolute;
    background-color: green;
    width: 100%;
    height: 100%;
}

html

<div class="flex">
    <div class="bg"></div>
    <span style="position:absolute;">按钮</span>
</div>

如果在Chrome或是高版本的Safari上，这两个绝对定位的元素是居于盒子的正中央的。
而实际上是

Chrome显示效果
低版本Safari 显示效果

查了半天文档，发现

As it is out-of-flow, an absolutely-positioned child of a flex containe does not participate in flex layout. (https://www.w3.org/TR/css-flexbox-1/#abspos-items)

absolute定位的元素不参与flex的布局，虽然有的浏览器允许这样写。当然也可以预见的是，不久的将来，我们可以这样用而不用考虑兼容问题。

不过，relative不受影响