窗口调整大小时Flex容器内Div尺寸异常缩小问题排查

原因 #

Flex容器的子元素默认带有flex-shrink: 1属性——当容器空间不足时，这个属性会允许元素按比例缩小。你的红色矩形作为Flex项目，在窗口缩小导致容器空间不够时，就会被自动压缩，尺寸随之变小。

遗漏的设置 #

你没有给.symbol元素设置flex-shrink: 0，这是阻止Flex项目被压缩的核心属性。

解决方法 #

给.symbol添加flex-shrink: 0，就能强制它保持固定尺寸，不会被压缩。修改后的CSS代码如下：

.container {
  border: 1px solid black;
  display: flex;
  align-items: center;
}

.symbol {
  width: 50px;
  height: 30px;
  background-color: tomato;
  margin-right: 10px;
  flex-shrink: 0; /* 禁止元素被压缩 */
}

或者用flex简写属性更简洁，flex: 0 0 50px代表不放大（flex-grow:0）、不缩小（flex-shrink:0）、基准宽度50px（flex-basis:50px），效果一致：

.symbol {
  flex: 0 0 50px;
  height: 30px;
  background-color: tomato;
  margin-right: 10px;
}

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