先记住这个答案
在Flex主轴方向上，flex-basis: auto会先查找对应书写模式的width或height；若该值为auto，再退回内容固有尺寸。flex-basis: content则跳过显式尺寸，直接基于内容文字的max-content宽度。由于content较晚才被浏览器支持，且当width为auto时两者结果一致，通常推荐用auto；只有需要强行忽略外部设置的具体宽度时，才值得改用content。需要注意，二者给出的都是初始主轴长度，最终仍会被flex-grow/flex-shrink调整。
- auto优先取width，width为auto时才用内容尺寸
- content直接取内容尺寸，完全忽略显式width
- 未设width时两者等价，content兼容性稍差
解析主尺寸的来源不同
在水平书写模式中，flex-basis: auto的计算会先读取该元素的width。若width是具体长度，例如300px，则auto就把300px作为初始主轴长度；只有当width为auto时，才回退到内容尺寸，等价于使用max-content。所以仅凭auto无法断定一定是内容宽度，它受到显式宽度影响。
content则绕开width，直接对内容做自动尺寸计算，通常结果是内容不换行时的首选宽度。即便设置了width: 200px，flex-basis: content依旧按文字长度撑开。这个“初始尺寸”随后会被flex-grow或flex-shrink按可用空间调节，因此如果设置了flex: 1 1 auto，高优先级增大后表现类似，但初始值不同会改变收缩比例基数。
导航按钮希望初始宽度等于文字宽度
一个水平导航栏包含“首页”“关于我们”“联系方式”三个按钮，组件样式里可能被第三方库统一设了width: 120px。产品要求按钮宽度始终刚好包住文字，并在容器不够宽时允许压缩间距。输入是flex-direction: row，约束是不能改动全局样式，且需要兼容Safari 14。
决策：使用flex: 0 1 content，但Safari 14不支持content关键字，因此退回方案：先重置width: auto，再令flex-basis: auto。这样auto因width已回退为auto，得到与content一致的效果。同时设置min-width: 0让按钮在空间紧张时可收缩到小于内容宽度，结果文字按钮按内容排列，空间不足时均匀收缩。
宽显式与兼容性的适用边界
当元素的width被外部样式设置为固定值，而你希望主轴初始尺寸跟随内容但又不便改动HTML时，content是唯一直接方案。因为auto会优先采用那个固定width，导致多出空白或溢出。但若flex-grow较大，width差异会被放大，所以先确认是否真的需要content。
另一个边界是百分比：flex-basis: 30%在容器尺寸不确定时会回退为content（按规范），此时结果和content一样，但和auto不同。兼容性方面，content从Chrome 105、Safari 15.4起才广泛可用。若项目覆盖旧内核，建议在功能检测后于CSS中写@supports (flex-basis: content)降级用width: max-content加auto，但代价是代码量增加且影响纵向书写模式。
容易答错的地方
- auto一定等于内容宽
- 错误。
auto会先检查width属性，只有width: auto时才采用内容尺寸。若设了具体宽度，主轴初始值就变成该宽度，与内容无关。 - content会优先用width
- 错误。
content彻底忽略width，始终基于内容自身尺寸计算。想强行清掉外来宽度时，content才有效，但注意它会被flex-grow放大。
面试官还会怎么问？
flex-basis: 0 与 auto 有何区别？
0是固定长度零，完全不参考内容或width，适合让flex-grow/shrink完全控制尺寸；auto则先查width，width为auto再看内容，初始值不为零。
在纵向书写模式下，auto会读取height吗？
会。auto在column方向或竖排书写模式中先尝试读取height属性；若height为auto，才退回到内容块轴尺寸，与横向时读取width的机制对称。
不想用content但想忽略固定width，怎么做？
可用flex-basis: auto并覆盖width: auto !important，或者给元素增加重置类把width设为auto。缺点是要处理优先级，且影响非flex上下文下的表现。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。