Chrome/Safari下Flex子元素未填充满父容器宽高、白边问题如何解决

空白填充异常修复方案 #

• 先重置全局默认样式，添加如下全局CSS规则，消除浏览器自带边距和盒模型差异：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

• 检查Flex父容器属性，确保纵向填充时align-items属性值为stretch（默认值为stretch，若被其他样式覆盖需要手动设置），横向填充时justify-content属性值为stretch，不要设置会收缩子元素尺寸的flex-start/center等值。
• 给需要填满父容器的Flex子元素显式设置flex: 1，Safari兼容场景下可拆写为flex-grow: 1; flex-shrink: 1; flex-basis: 0%;，flex-basis设置为0可避免浏览器按内容默认尺寸计算导致的填充不足问题。
• 若父容器为inline-flex类型，给父容器添加font-size: 0即可消除行内元素默认的字符间隙，子元素单独设置需要的字号即可。

带边框元素适配异常修复方案 #

• 上述全局box-sizing: border-box规则必须配置，确保边框、内边距都被计算在元素设定的宽高范围内，不会额外撑大元素尺寸导致布局偏移。
• 若Safari下出现边框位置偏移、边缘空白的渲染bug，给带边框的元素添加transform: translateZ(0)，强制开启GPU渲染即可修复。
• 若带边框的Flex子元素出现溢出父容器的问题，给父容器添加overflow: hidden，同时给子元素添加min-width: 0; min-height: 0，覆盖Flex布局默认的"子元素最小尺寸等于内容尺寸"规则即可。

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