flex与position用在一起出现的问题

需求：导航栏固定在头部，并且可以左右滑动

<div class="wrap"></div>

//css样式
.wrap {
    position: fixed;
    display: flex;
}

发现flex布局失效了，因此被定位的盒子不参与flex布局。

那就在这个盒子外面套一个盒子，给外层盒子使用定位，内层没有使用定位的盒子继续使用flex

<div class="content">
    <div class="wrap"></div>
</div>

// css样式
.content {
    position: fixed;
}
.wrap {
    display: flex;
}

问题基本上解决了，但是有一些低版本手机上滑动失效了并且样式也出现了问题，也就是不兼容父元素定位子元素使用flex布局，最后只能是把flex布局替换掉了

<div class="content">
    <div class="wrap"></div>
</div>

// css样式
.content {
    position: fixed;
}
.wrap {
    display: inline-block;
}