为什么flex-shrink在inline-flex容器中无法正常生效？

这是CSS规范定义的预期表现，问题根本不在flex-shrink的逻辑差异，而是两类flex容器的默认宽度计算规则不一样：

• 设为display: flex的是块级弹性容器，和普通div这类块级元素一样，默认宽度会撑满父容器给的可用宽度。示例里外層绿色容器宽度固定100px，所以这个flex容器的宽度默认就是100px。里面3个蓝色块每个宽50px，加上相邻的5px右边距，总占位是160px，比容器宽度大，默认开启的flex-shrink:1自然会生效，把块压窄适配容器。
• 设为display: inline-flex的是行内级弹性容器，和inline-block元素的尺寸逻辑一致，默认宽度是收缩到刚好包住内容的大小，不会主动撑满父容器宽度。示例中没有给这个inline-flex容器设置宽度，它自己会被内容撑到160px宽，根本不存在内容溢出容器的情况，flex-shrink连触发的条件都没有，子项当然不会收缩。

只要给.inline-flex手动加上width: 100px，把它的宽度强制限制到和父容器一致，马上就能看到它的子项和普通flex容器里的表现一模一样，会正常收缩。
另外示例代码里有个小笔误：.container的样式里margin 0 auto少了属性冒号，正确写法是margin: 0 auto，不过这个错误不影响本次的收缩效果表现。

参考修正后的核心代码：

.container {
  width: 100px;
  margin: 0 auto; /* 修正原笔误 */
  margin-top: 100px;
  background-color: green;
}

.inline-flex {
  display: inline-flex;
  width: 100px; /* 增加宽度约束后子项正常收缩 */
  margin-bottom: 10px;
}

.flex {
  display: flex;
}

.item {
  width: 50px;
  height: 50px;
  margin-right: 5px;
  background-color: blue;
}

<div class="container">
  <div class="inline-flex">
    <div class="item">shrink</div>
    <div class="item">shrink</div>
    <div class="item">shrink</div>
  </div>
  <div class="flex">
    <div class="item">shrink</div>
    <div class="item">shrink</div>
    <div class="item">shrink</div>
  </div>  
</div>

内容的提问来源于stack exchange，提问作者flasher1101