flex:1的大坑

一、问题描述

整个类名为roomList 的大盒子设置了flex为1，与它同级的其他盒子都已经设置了宽高，但roomList 依然被内容撑开了，没有自适应

  .roomList {

        flex: 1;

}

 二、原因分析

roomList的整个高度溢出，对于包裹roomList的父盒子（已设置display:flex,flex-direction:column)来说，由于flex主轴上的min-height/width是auto，导致roomList父盒子的min-height是整个父盒子的高度，所以roomList的高度看起来是被撑开了

三、解决方法：

1.设置min-height:0px

  .roomList {

        flex: 1;

        min-height:0px;

}

2.直接设置overflow的相关属性，只要不是overflow: scroll就可以

四、补充flex:1的含义

flex:1是 felx:1 1 0的缩写

1.第一个参数：

flex-grow 放大比例

默认为0（也就是默认如果存在剩余空间，也不放大）

 2.第二个参数：

felx-shrink 缩小比例

默认为1（也就是默认如果空间不足，将缩小）

3.第三个参数：

felx-basis 给以上两个属性分配多余空间之前，计算是否有多余空间

默认为auto,即本身的大小