flex-grow无法直接平分宽度，因其分配的是剩余空间而非容器总宽；需设flex-basis:0（如flex:1 1 0）切断内容影响，并配合box-sizing:border-box、min-width:0及统一字体/内边距才能实现三列严格等宽。
flex-grow 无法直接“平分宽度”——它分配的是剩余空间，不是容器总宽。 很多开发者在移动端三级联动选择器（比如省-市-区）上用 flex-grow: 1 期望三个下拉框严格等宽，结果发现宽度不均、文字溢出或错位。根本原因不是写法错，而是没控制初始尺寸基准。
为什么 flex-grow: 1 在三级联动里常失效
移动端选择器通常由三个 <select> 或自定义 <div> 组成，父容器设为 display: flex 后，常见错误是只加：
.picker-row { display: flex; }
.picker-item { flex-grow: 1; }这会导致：
- 每个
<select>的默认flex-basis是auto，浏览器按内容（如“北京市”比“津”宽得多）计算初始宽度，再分配剩余空间 —— 初始宽度差异大，flex-grow拉伸后仍不等宽 - 移动端
<select>渲染受系统控件影响，iOS Safari 对flex支持有边界行为，尤其在表单内嵌场景 - 未重置
box-sizing，padding/border 叠加导致实际占用超预期
真正让三列严格等宽的写法
关键不是只靠 flex-grow，而是**切断内容对初始尺寸的影响**：
立即学习“前端免费学习笔记（深入）”；
- 把所有子项的
flex-basis设为0，强制清空原始宽度，让flex-grow从零开始按比例分空间 - 配合
flex-shrink: 1防止内容撑爆容器（尤其长地名） - 统一
box-sizing: border-box和min-width: 0（防文本溢出破坏 flex 行为）
推荐写法：
.picker-row {
display: flex;
}
.picker-item {
flex: 1 1 0; /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
box-sizing: border-box;
min-width: 0;
}注意：flex: 1 是简写，但它的默认 flex-basis 是 auto，不是 0 —— 这正是坑点。
适配 iOS Safari 的兼容处理
iOS 15+ 虽已支持标准 flex，但 <select> 在 flex 容器中仍可能被渲染引擎“保护”而忽略 flex-basis: 0。稳妥方案：
- 不用原生
<select>，改用语义化<div role="combobox">+ 自定义弹层，完全可控 - 若必须用原生
<select>，加一层包裹<span>并对其设flex，把<select>设为width: 100% - 加前缀保底（虽现代已非必需，但老版 WKWebView 仍有残留）：
-webkit-flex: 1 1 0;
字体大小和 padding 对视觉等宽的影响
即使 flex 计算出的宽度一致，中文字符宽度不均（如“一” vs “龘”）、不同字号、padding 差异都会造成视觉错觉。建议：
- 三列使用相同
font-size、line-height和padding - 给
.picker-item加text-overflow: ellipsis; white-space: nowrap; overflow: hidden;防文字撑开 - 用
max-width限制单列上限（例如max-width: 33.333%），避免极端长名破坏布局
最易被忽略的一点：flex 分配的是主轴方向空间，而三级联动通常是水平排列（flex-direction: row），但如果误设为 column，flex-grow 就会去拉高而非拉宽 —— 动手前先确认主轴方向。
