CSS如何实现min-width取min-content与指定值的较大值

可以通过纯CSS实现该需求，无需新增额外包裹元素，也不需要修改父元素的flex column布局。

问题原因 #

之前直接追加min-width: 90px不符合预期，是因为该写法覆盖了原样式中min-width: min-content的约束：浏览器不再将「最长不可断内容的宽度」作为硬最小宽度，导致存在超长无断行文本时，元素宽度被max-width: 100%限制在父元素宽度内，无法随长文本撑宽。

实现方案 #

兼容性更好的写法（支持Chrome 79+、Firefox 94+、Safari 14.1+）

将.shrink样式调整为如下代码，需要自定义最小宽度时直接修改min-width的数值即可，原有所有表现都会完整保留：

.shrink {
  width: fit-content;
  min-width: 90px; /* 替换为你需要的最小宽度值 */
  max-width: 100%;
  box-sizing: border-box;
  /* 若个别浏览器下出现元素被强制拉伸到父宽度的情况，放开下面这行注释即可 */
  /* align-self: flex-start; */
}

样式逻辑说明：

• width: fit-content让宽度优先适配内容：内容宽度小于父元素时取内容宽度，普通可换行长文本适配到父元素宽度，存在不可断超长内容时取最长内容的本身宽度。
• min-width 给短文本场景加上最小宽度约束，内容宽度不足时保持设定的最小宽度。
• max-width: 100% 保证普通可换行长文本不会超出父元素宽度。
• 保持默认的文本换行规则即可，不要添加word-break: break-all、overflow-wrap: anywhere这类强制断词属性，避免超长不可断内容被强制拆分。

更简洁的现代浏览器写法（支持Chrome 111+、Firefox 113+、Safari 16.4+）

如果不需要兼容过低版本浏览器，可以直接把所有宽度约束写在width属性中，不需要额外配置min-width、max-width和对齐属性：

.shrink {
  width: max(min(max-content, 100%), min-content, 90px); /* 90px替换为需要的最小宽度 */
  box-sizing: border-box;
}

该写法直接通过CSS数值函数实现宽度计算逻辑：先取内容最大宽度和父宽度的较小值（保证可换行内容不超出父元素），再和不可断内容的最小宽度、自定义最小宽度三者取最大值，完全匹配需求的宽度规则。

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