解决OPPO手机安卓5.1版本flex布局横向滚动条失效解决OPPO手机安卓5.1版本flex布局横向滚动条失效，首先尝

解决OPPO手机安卓5.1版本flex布局横向滚动条失效，首先尝试flex新旧兼容写法无果后。观察到项目中宽度全部失效，累计宽度最大为容器的宽度，考虑是否是由于容器空间不足，所有项目被迫缩小。将容器中所有项目的flex-shrink属性设置为0后，问题解决。

正常效果

bug效果

有关flex-shrink属性的基本用法

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

计算方法：

当各个项目的宽度总和大于容器的宽度的时候，项目进行收缩。超出部分 = 项目宽度之和 - 容器的宽度，超出的部分会被项目按照收缩的比例减去相应的部分。当属性值为0的时候，表示没有进行收缩。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex-shrink</title>
</head>
<style>
  .container {
    width: 600px;
    height: 300px;
    display: flex;
    background-color: blue;
  }

  .item {
    height: 190px;
    border: 5px solid black;
    background-color: rgb(62, 105, 64);
    text-align: center;
    font-size: 50px;
    line-height: 290px;
  }

  .itemOne {
    width: 40px;
    flex-shrink: 1;
  }

  .itemTow {
    width: 90px;
    flex-shrink: 1;
  }

  .itemThree {
    width: 140px;
    flex-shrink: 1;
  }

  .itemFour {
    width: 190px;
    flex-shrink: 1;
  }
</style>

<body>
  <div class="container">
    <div class="item itemOne">1</div>
    <div class="item itemTow">2</div>
    <div class="item itemThree">3</div>
    <div class="item itemFour">4</div>
  </div>
</body>

</html>

将container的宽度从600px变成400px，flex-shrink分别设置成1，1，1，1

将container的宽度从600px变成400px，flex-shrink分别设置成4，3，2，1

将container的宽度从600px变成400px，flex-shrink分别设置成1，1，1，0

将container的宽度从600px变成400px，flex-shrink分别设置成0，0，0，0

其他的关于flex的兼容性可以看看这个caniuse.com/#feat=flexb…