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

最新推荐文章于 2023-08-29 22:05:24 发布

红浴巾

最新推荐文章于 2023-08-29 22:05:24 发布

阅读量850

点赞数

分类专栏：工作记录

本文链接：https://blog.csdn.net/qq_37473645/article/details/109674166

版权

针对OPPO手机Android 5.1版本中flex布局横向滚动条失效的问题，解决方案在于调整flex-shrink属性。当项目宽度总和超过容器宽度时，将所有项目的flex-shrink设为0，以防止项目因容器空间不足而被迫缩小。

摘要由CSDN通过智能技术生成

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

正常效果

bug效果

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

计算方法：

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

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-widt

关注

专栏目录