flex item 在其内容超出宽度而被撑开时，shrink 不生效问题

问题

最近遇到一个奇怪的问题，我有一个父元素和两个子元素，其中：

父元素：定宽、flex；

子元素 a ：也设置的定宽，flex-grow 0，flex-shrink 0，flex-basis 300px

子元素 b ：flex-grow 1, flex-shrink 1;

原本的需求就是，元素 a 定宽，元素 b 占据剩余宽度，但是，当元素 b 中的 content 超过父元素减去元素 a 宽度的剩余宽度时，子元素 b 不会如愿收缩，而是会被撑开。

原因

因为 css 会给非滚动的 flex item 元素默认添加 min-width: auto 和 min-height: auto 属性，使 flex-item 的宽度不小于 content 本身。

解决方法

• 直接覆盖掉min-width: auto 和 min-height: auto 属性

  .flex-item-b {
    min-width: 0;
    max-width: 0;
  }
  

• 修改 overflow 的值为非默认，即非 visible 值，使 flex-item 为非滚动类型。

参考文档：

1. html - Why don't flex items shrink past content size? - Stack Overflow

   A flex item cannot be smaller than the size of its content along the main axis.

   The defaults are...

   • min-width: auto
   • min-height: auto

   ...for flex items in row-direction and column-direction, respectively.

   You can override these defaults by setting flex items to:

   • min-width: 0
   • min-height: 0
   • overflow: hidden (or any other value, except visible)