已设置宽高元素仍被压缩？Flex布局下元素尺寸异常问题

问题原因 #

你的.parent容器使用Flex布局且设置了justify-content: flex-end。添加.my-div并设置height: 100%后，Flex容器会尝试让所有子元素总高度适配容器，但默认Flex项目的flex-shrink: 1（允许收缩），所以SVG会被压缩——哪怕你给它设了固定宽高，Flex的收缩规则优先级更高。

修复方案 #

只需两处调整即可实现预期效果：

• 给SVG（或替换的普通div）加flex-shrink: 0，禁止它被压缩，保留固定尺寸；
• 把.my-div的height: 100%改成flex-grow: 1，让它自动占据容器剩余高度，这是Flex布局的正确用法。

修改后的代码 #

CSS部分

.parent {
  display: flex;
  flex-direction: column;
  height: 200px;
  position: absolute;
  justify-content: flex-end;
  background-color: yellow; 
}

.my-div {
  width: 100%;
  flex-grow: 1; /* 替换原height:100% */
  background-color: blue;
}

.my-svg {
  flex-shrink: 0; /* 禁止SVG被压缩 */
}

JavaScript和HTML部分保持不变

无需修改原JS和HTML代码，调整CSS后即可实现：点击SVG时，蓝色div占满容器剩余高度，红色SVG始终保持50×50的固定尺寸。

额外说明 #

如果用普通div代替SVG，只需给该div加上flex-shrink: 0和固定宽高，就能达到同样效果——本质是Flex布局中子元素的收缩规则导致的问题，和元素类型无关。

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