Safari不遵循div宽度问题：如何强制其遵守设置？

Safari对Flex子项的宽度处理逻辑和其他浏览器略有差异，默认情况下，即使给子项设置了width，当容器空间不足时，子项仍会被压缩。要强制让Safari遵守.left容器的106px宽度，可通过以下两种方式解决：

方法一：添加flex-shrink: 0 #

flex-shrink属性控制Flex子项是否允许被缩小，默认值为1（允许缩小）。将其设为0后，子项会强制保留设置的宽度，不会被压缩。

修改CSS：

.flex {
  display: flex;
  flex-wrap: nowrap;
}

.left {
  width: 106px;
  flex-shrink: 0; /* 禁止缩小 */
}

或者直接修改内联样式：

<div class="left" style="width:106px; flex-shrink: 0;"><img src="#" width="80"></div>

方法二：使用flex-basis替代width（更严谨的Flex写法） #

在Flex布局中，flex-basis才是定义子项基准宽度的原生属性，width仅作为回退值。结合flex-shrink:0使用，能更好地兼容Safari：

.left {
  flex-basis: 106px; /* 基准宽度 */
  flex-shrink: 0; /* 禁止缩小 */
}

原理说明 #

Safari的Flex布局实现中，未明确设置flex-shrink时，子项默认会在容器空间不足时自动缩小以适应布局。通过flex-shrink:0锁定子项宽度，再配合width或flex-basis定义固定宽度，就能让Safari强制遵守设置的宽度值，确保右侧.right容器正常排列在其右侧。

内容的提问来源于stack exchange，提问作者Alex Güemez