我明白你的困扰——明明给.tab__item设置了flex: 1 1 0;，但"Me"和"Everyone"两个标签还是没能保持相同宽度对吧？咱们来一步步搞定这个问题：

问题原因 #

其实flex: 1 1 0;（等同于flex-grow: 1; flex-shrink: 1; flex-basis: 0;）的逻辑是让所有flex item平分父容器的可用空间，但这里有两个关键点可能被你忽略了：

• 父容器.tab的默认宽度是auto，它会自适应子元素的最大宽度，这时候没有多余的空间让flex-grow发挥作用
• 浏览器默认给flex item设置了min-width: auto，这会阻止item收缩到小于自身内容的宽度

解决方案 #

你只需要做两处调整就能实现预期效果：

1. 给父容器设置明确宽度 #

让.tab拥有足够的空间供子元素平分，比如设置为100%宽度：

.tab {
  display: flex;
  width: 100%; /* 或者固定宽度比如300px，根据你的布局需求调整 */
}

2. 强制flex item忽略内容宽度限制 #

给.tab__item加上min-width: 0，确保它能完全按照flex规则分配宽度，同时可以加上文本截断样式优化过长内容的显示：

.tab .tab__item {
  flex: 1 1 0;
  border: 1px solid #c3c4c7;
  padding: 0.1rem 0.2rem;
  min-width: 0; /* 关键：取消最小宽度限制 */
  white-space: nowrap; /* 可选：禁止文本换行 */
  text-overflow: ellipsis; /* 可选：文本超出时显示省略号 */
  overflow: hidden; /* 配合text-overflow使用，隐藏超出内容 */
}

这样调整后，不管两个item的内容长度如何，都会平分父容器的宽度，完美实现你要的效果~

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