使用flex布局 在ios上页面无法滚动的hack方案（在安卓上没遇见这种问题）

描述：在使用flex布局，在滚动的box有滚动时，当第一次进入页面时，页面出现无法滚动的问题。但是进入其他页面，再次返回该页面就可以滚动了（在两次项目中都遇见了这样的问题）

坑：原本以为是由于图片渲染的时候高度没有确定，导致的高度问题引发的内容没有填充box的问题。但是使用了在img标签外面写固定高度的div来解决，并没有效果。

最终使用了定位的方式来解决这样的问题。

eg: 会出现这种情况的代码

// html
<div class='box'>
  <div calss='content'>
     <div class='item'>
        content1
     </div>
     <div class='item'>
        content2
     </div>
  </div>
  <div class='bottom-btn'>我是一个按钮</div>
</div>

// css

.box{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.content{
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
.item{
    width:100%;
    height:500px;
}
.bottom-btn{
    height:4rem;
}

这种布局的在第一次进入的时候会有几率出现无法滚动的情况

hack: 可能是ios中对定位的比较的敏感，或者是定位可以脱离文档流的原因（还不清楚），可以使用定位的方法来hack这种问题

// html
<div class='box'>
  <div calss='content'>
    <div class='scroll-box'>
        <div class='item'>
        content1
        </div>
        <div class='item'>
        content2
        </div>
    </div>
     
  </div>
  <div class='bottom-btn'>我是一个按钮</div>
</div>

// css

.box{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.content{
    position: relative;
    top:0;
    left: 0;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}
.scroll-box{
    position: absolute;
    top:0;
    left: 0;
    width:100%;
}
.item{
    width:100%;
    height:500px;
}
.bottom-btn{
    height:4rem;
}