您将遇到flexbox默认设置。

flex项不能小于其内容沿主轴的大小。

默认值是。。。

• 最小宽度:自动
• 最小高度:自动

。。。分别用于行方向和列方向的柔性项。

您可以通过将flex项设置为:

• 最小宽度:0
• 最小高度:0
• 溢出:隐藏（或除可见之外的任何其他值）

4.5. 弹性项目的自动最小大小

为了为flex项提供更合理的默认最小大小，本规范引入了一个新的auto值，作为CSS 2.1中定义的min-width和min-height属性的初始值。

关于自动值。。。

对于溢出在主轴中为可见的flex项，当在flex项的主轴最小尺寸属性上指定时，将指定自动最小尺寸。 否则计算为0。

换句话说:

• min-width:auto和min-height:auto默认值仅在overflow为可见时应用。
• 如果溢出值不是可见，则min-size属性的值为0。
• 因此，溢出:隐藏可以替代min-width:0和min-height:0。

然后。。。

• 最小尺寸算法仅适用于主轴。
• 例如，行方向容器中的flex项默认情况下不获取min-height:auto。
• 有关更详细的解释，请参阅以下帖子:
  • 在弯曲方向:行和弯曲方向:列中呈现的最小宽度不同

  嵌套Flex容器

  如果要在HTML结构的多个级别上处理flex项，则可能需要覆盖较高层项的默认min-width:auto/min-height:auto。

  基本上，具有min-width:auto的高级flex项可以防止下面嵌套的具有min-width:0的项收缩。

  示例:

  • 弹性项的收缩幅度不小于其内容
  • 将子项装入父项
  • 空白css属性正在创建Flex问题

  >

• Chrome与Firefox/Edge

  至少自2017年以来，Chrome似乎要么（1）恢复到min-width:0/min-height:0默认值，要么（2）基于神秘算法在某些情况下自动应用0默认值。 （这可能就是他们所谓的干预。） 因此，很多人都看到他们的布局（尤其是想要的滚动条）在Chrome中如预期的那样工作，但在Firefox/Edge中却并非如此。 Firefox和Chrome之间的伸缩差异将在这里得到更详细的讨论

  IE11

  如规范中所述，min-width和min-height属性的auto值是“new”。 这意味着某些浏览器可能在默认情况下仍然呈现0值，因为它们在值更新之前就实现了flex布局，并且因为0是CSS 2.1中min-width和min-height的初始值。 IE11就是这样一种浏览器。 其他浏览器已更新到flexbox规范中定义的较新的auto值。

  null

  .container {
    display: flex;
  }
  
  .col {
    min-height: 200px;
    padding: 30px;
    word-break: break-word
  }
  
  .col1 {
    flex: 1;
    background: orange;
    font-size: 80px;
    min-width: 0;   /* NEW */
  }
  
  .col2 {
    flex: 3;
    background: yellow
  }
  
  .col3 {
    flex: 4;
    background: skyblue
  }
  
  .col4 {
    flex: 4;
    background: red
  }

  <div class="container">
    <div class="col col1">Lorem ipsum dolor</div>
    <div class="col col2">Lorem ipsum dolor</div>
    <div class="col col3">Lorem ipsum dolor</div>
    <div class="col col4">Lorem ipsum dolor</div>
  </div>