H5C3

min-width

在flexBox中，默认情况下，子元素（flexitem）的min-width属性值并不是0，而是auto

min-width:auto的含义：’

比如

html

<div class="flex w-200px">
  <!-- 父容器：flex，固定宽200px -->
  <div class="flex-shrink-0">批次号：</div>
  <!-- 左侧：不收缩 -->
  <div class="overflow-hidden whitespace-nowrap text-ellipsis">
    <!-- 右侧：要显示省略号 -->
    {{ productInfo.batchNo }}
    <!-- 假设这串字符超长，如 "ABC123456789..." -->
  </div>
</div>

按理说：右侧元素设置了overflow:hidden和text-overflow:ellipsis，所以应该显示省略号。

但实际情况：因为右侧元素作为flex子项，默认min-width:auto，所以浏览器会死死抱住那串长字符（ABC123...），不让它被截断，为了满足不被截断的要求，只能把父容器撑破，或者把左侧的“批次号“挤出换行

当你给右侧元素加上min-width:0时，就覆盖了浏览器的默认保护机制。

不管这个元素内容本身有多长，我允许你收缩到宽度为0，只要父容器需要你收缩

有了这个属性，overflow:hidden才能正常生效

flex-shrink

当父容器空间不够时，flex-shrink决定子元素是否要缩水，以及缩多少

flex-shrink:0：不收缩，宁可撑破父容器，也保持自己原始的宽度
flex-shrink:1：默认值，自动收缩，根据父容器空间不足的比例，大家一起平均分摊缺少的空间，一起变窄
flex-shrink:2：收缩，根据父容器空间不足的比例，收缩自己，但是收缩的量是2倍

H5C3 ​

min-width ​

flex-shrink ​

H5C3

min-width

flex-shrink