Flex容器内浮动图片加padding后意外缩小的CSS修复方案求助

针对Flex容器内图标设置内边距后尺寸被挤压的问题，可通过以下CSS规则快速修复，无需批量修改现有内边距设置：

核心修复代码 #

针对图标元素（请根据实际类名替换.icon）添加以下样式：

.icon {
  box-sizing: border-box;
  flex-shrink: 0;
}

修复原理 #

1. box-sizing: border-box：将元素的内边距和边框纳入宽高计算范围，设置的60px宽高会包含20px右内边距，不会出现宽高被内边距“吃掉”的情况。
2. flex-shrink: 0：禁止Flex容器在空间不足时压缩该元素，确保图标始终保持设置的尺寸，避免复杂布局中容器空间分配导致的尺寸异常。

如果仅其中一条规则生效，可单独保留对应规则即可。

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