问题
如上图所示， A 及 B 的 父盒子 是 C。其中 C 和 B 都用到了 flex 布局，目的是使文字水平对齐。
css 代码
// A 及 B 的父盒子
.cur-in-stan {
color: red;
height: 37px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
margin-right: 10px;
// B 盒子
.cur-in-stan-name {
display: flex;
align-items: center;
max-width: 100px;
}
}
其中 B 设置了 max-width: 100px。但当 B 中的文本内容宽度小于 100px 时（如下图所示），会导致 A 样式错乱。
分析
需求：让 A 占据宽度不变，B 最大宽度为 100px，B 中的文本宽度若超过 100px 则以省略号显示，鼠标悬浮显示完整内容。
若把 B 的 max-width: 100px 改为 width: 100px，不会发生上述 A 样式错乱的情形，但是会导致 B 宽度过大，与后面元素的间隔太大（如下图所示）。因此，B 必须要有 max-width。
进一步分析
B 有 max-width，为什么会导致 A 样式错乱 ？
- 当 B 没有固定宽度，只有最大宽度时，且 B 中的文本宽度小于最大宽度时：B 的宽度等于 B 中文本的宽度。
- A 没有设定宽度。A 及 B 的父盒子也没有设定宽度。
- 因此，A 及 B 的宽度都靠内部文本宽度撑起来。
- 结论：由于父盒子宽度不够，A 的宽度会被压缩
解决方案
效果
方案一（推荐）： 给 A 设置 flex-shrink: 0，则 A 的固定宽度不会被压缩
给 A 设置 `flex-shrink: 0`
.cur-in-stan {
color: red;
height: 37px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
margin-right: 10px;
// A 盒子
.label {
flex-shrink: 0;
}
// B 盒子
.cur-in-stan-name {
display: flex;
align-items: center;
max-width: 100px;
}
}
方案二：给 B 设置 flex: 1，让 B 中的文本撑满 flex 容器剩余空间
如果Flex容器中仅有一个项目设置了
flex: 1，那么这个项目的大小将填充整个Flex容器，并且在容器内不会留下任何空间。
给 B 设置 `flex: 1`
.cur-in-stan {
color: red;
height: 37px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
margin-right: 10px;
.cur-in-stan-name {
display: flex;
align-items: center;
max-width: 100px;
// 让 B 中的文本撑满 flex 容器剩余空间
flex: 1;
}
}
分析 flex 属性
flex: 1 是以下内容的简写：
让该Flex项目在 Flex 容器中平均分配剩余的可用空间（如果有剩余的话）
flex-grow: 1; // 放大比例设置为 1，所以它会占据可分配空间的相同份额
flex-shrink: 1; // 在 Flex 容器宽度不足时，它会缩小
flex-basis: 0; // 确保该项目的最小大小为 0
以下为这三个属性的默认值：
