flex布局子元素宽度没有自适应

问题

在项目中使用flex布局，当flex子元素的宽度过大，超出flex父元素时，父级设置flex:1并不能限制flex子元素的尺寸，导致子元素没有自适应

代码如下

<div clas='app'>
  <div class='left'></div>
  <div class='right'>
    <div class='rightChild'></div>
  </div>
</div>

.app {
  display: flex;
  .left {
    width: 200px
  }
  .right {
    flex: 1
  }
}

类名为rightChild的div宽度超出父级宽度没有根据 flex-shrink 属性进行收缩自适应

原因：

浏览器默认为flex容器的子元素设置了 "min-width: auto;min-height: auto", 即flex子元素的最小宽度高度不能小于其内容的宽高, 在规范里的表述是:
A flex item cannot be smaller than the size of its content along the main axis.

解决方案

通过设置 min-width: 0, 覆盖这个默认设置, flex-shrink属性就能生效了

.app {
  display: flex;
  .left {
    width: 200px
  }
  .right {
    flex: 1;
    min-width:0;
  }
}

参考文献：stackoverflow.com/questions/3…