【bug记录5】flex横向布局时子元素设置宽度无效

一、问题背景

对父元素list使用了flex布局之后，尝试将其子元素item固定宽度，但发现宽度设置不生效并且实际宽度被压缩了。

具体的css代码如下：

      .list {
        display: flex;
        align-items: center;
        justify-content: space-between;

        //没设置宽度，因为想适配子元素的总宽度
        height: 64px;
        padding: 16px 15px;
        
        overflow-x: scroll;
        overflow-y: hidden;


      }

      .item {
        display: inline-block;
        width: 30px;
        height: 30px;
      }

二、问题分析

原因：

• 由于list没设置宽度，因此list在弹性布局下宽度会优先适配自己的父元素的宽度
• 在这里由于item子元素数量多，加起来的总宽度大于list元素的父元素的宽度，因此被设置了flex布局的list元素会挤压子元素，并优先执行上面这一条原则。所以item子元素的实际width小于设置值

三、解决方法

在item子元素里面加一个flex-shrink:0，代表元素不允许被弹性布局挤压