display: flex下设置 overflow-x: auto不出现滚动条且子元素收缩宽度解决方案

写页面时多次遇到类似的问题 每次搜不到解决办法 记录某次成功的解决方法

//区块
  &-footer {
          width: calc(100% - 8px);
          padding: 8px 4px 2px;
          height: 60px;
          gap: 8px;
          position: relative;
          overflow-y: hidden;    
          overflow-x: auto;
          white-space: nowrap;
          display: flex;
          flex-direction: row;
          align-items: center;
          flex-wrap: nowrap;
          justify-content: flex-start;
      
//子块
          &-item {
            border-radius: 8px 8px 16px 8px;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            height: 60px;
            width: 60px;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: center;

            em {
              display: block;
              font-size: 28px;
              line-height: 40px;
            }

            span {
              display: block;
              font-size: 12px;
              line-height: 20px;
            }
          }
        }

解决方法如下，为display: flex下的子元素设置

  flex: 0 0 auto;

 &-item {
  			flex: 0 0 auto;
            border-radius: 8px 8px 16px 8px;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            height: 60px;
            width: 60px;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-items: center;
}

添加上flex: 0 0 auto;后-item的内容宽度已经按预期的60px生效 且横向滚动也自动生效了

关于 flex 属性的基本知识

flex 属性
flex 属性是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写形式。例如：

css
flex: 1; /* 等同于 flex: 1 1 0%; */  
flex: 0 0 auto; /* 显式设置每个值 */

flex-grow: 定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。
flex-shrink: 定义项目的缩小比例，默认为 1，即如果空间不足，该项目将缩小。
flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto，即项目的本来大小。
常见问题
容器宽度未设置：如果 Flex 容器没有设置宽度（或者父元素宽度未设置），那么它可能会扩展以包含其内容，即使你设置了 flex-basis 或 width。
flex-shrink 默认为 1：如果 Flex 子项的总宽度超过了容器，并且 flex-shrink 未被设置为 0，那么子项会缩小以适应容器。
flex-basis 与 width 的关系：flex-basis 和 width 在某些情况下会互相影响。flex-basis 定义了项目在主轴上的初始大小，而 width 是常规块级元素的宽度。在 Flex 布局中，flex-basis 优先级更高。但是，如果你同时设置了 width 和 flex-basis，且容器有足够的空间，那么项目的大小可能会是两者中较大的那个（取决于其他因素，如 min-width、max-width 等）。
flex 属性与 min-width/max-width 的关系：min-width 和 max-width 可以限制 Flex 子项的最小和最大宽度。即使 flex-grow 设置为一个非零值，子项也不会小于其 min-width 或大于其 max-width。