视口缩小时flex子项不保留高度 Chrome下SVG图标高度不一致问题

这个Chrome独有的异常表现是Flex布局默认收缩规则与SVG比例计算的浏览器兼容差异导致的：当外层flex容器宽度不足时，Chrome默认允许所有flex子项自动收缩，长方形SVG的容器固有宽度更大，收缩幅度更高，最终导致高度被挤压得比正方形图标更小。

你只需要修改CSS如下即可解决问题，不需要调整外层容器的50%宽度设置：

.general-container{
  background-color: peachpuff;
  display: flex;
  flex-direction: row;
  width: 50%;
  justify-content: space-between;
  margin: 0 auto;
  /* 可选补充：容器宽度不足时显示横向滚动条，避免图标被挤压 */
  overflow-x: auto;
}
.icon-container{
  display: block;
  margin: 0 2px;
  height: 80px;
  /* 新增：禁止flex子项自动收缩 */
  flex-shrink: 0;
  /* 新增：容器宽度自动适配SVG内容比例 */
  width: fit-content;
}
/* 可选补充：明确指定SVG优先适配容器高度，宽度按比例自适应 */
.icon-container svg {
  height: 100%;
  width: auto;
}

修改后所有图标会始终保持80px的统一高度，长方形和正方形图标缩放比例完全一致，Chrome和Firefox下表现相同。如果需要在容器宽度不足时让所有图标等比例缩小、仍保持统一高度，只需要删除flex-shrink: 0和overflow-x: auto即可。

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