CSS中如何实现取100%与max-content较大值设置元素宽度

width: max(100%, max-content)无法正常生效的核心原因有两点：

• CSS的max()函数中同时使用百分比值和内在尺寸关键字（max-content属于固有尺寸关键字）时，会触发循环尺寸计算逻辑：百分比宽度的计算依赖父元素的可用宽度，max-content的计算依赖元素内容的实际宽度，如果父元素本身是收缩适配尺寸的类型（浮动元素、inline-block元素、flex/grid子项等），两个计算值会互相依赖，最终结果完全不符合预期。
• 部分浏览器版本对max()函数内搭配固有尺寸关键字的解析逻辑存在兼容问题，不会正确返回两个值中的较大值。

不需要用max()函数，直接通过宽度+最小宽度的组合就能实现需求，所有现代浏览器均兼容，无循环计算问题：

.target-el {
  width: max-content;
  min-width: 100%;
  /* 存在border、padding时建议加上，避免盒模型计算导致元素溢出父容器 */
  box-sizing: border-box;
}

实现逻辑 #

• 当内容对应的max-content宽度小于父容器100%宽度时，min-width: 100%的限制生效，元素宽度保持为父容器的100%，满足默认撑满的要求。
• 当内容对应的max-content宽度大于父容器100%宽度时，min-width的限制被突破，元素宽度直接适配内容取max-content值，满足长内容自动撑开的要求。

特殊场景适配 #

如果目标元素是flex布局的直接子元素，需要额外添加一条规则，避免flex默认的收缩逻辑覆盖宽度设置：

.target-el {
  flex-shrink: 0;
}

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