苹果设备下flex布局两div同行对齐异常兼容问题

苹果全系列设备的浏览器（包括Safari、iOS端微信/Chrome等所有内嵌浏览器，均使用Webkit内核）对Flex子项的默认尺寸计算逻辑和Chromium内核存在差异：Flex布局的直接子项默认属性为min-width: auto，当子项内部存在设置了width: 100%的元素时，Webkit内核会将该子项的最小宽度计算为父Flex容器的100%，直接把图片容器撑满整行，挤压后续文本容器导致换行错乱。
你之前给文本容器添加width: 100%无效，是因为此时图片容器已经占满整行宽度，Flex布局没有剩余可分配空间，文本容器的宽度设置自然无法生效。

无需移除img标签上的width: 100%属性，仅需调整Flex子项的相关属性即可解决，两种可选方案： #

方案1（推荐，改动最小） #

给包裹图片的第一个Flex子项（即带mr-2类的div）添加固定宽度和禁止收缩属性，和你现有.site-logo-thumbnail设置的48px高度匹配即可：

.d-flex.align-items-center > div:first-child {
  flex-shrink: 0;
  width: 48px;
}

添加后图片容器会固定为48px宽高，内部img的width:100%会自动适配容器尺寸，配合已有的object-fit: contain规则，logo显示效果和预期完全一致，不会出现拉伸变形。 #

方案2（适配非正方形logo场景） #

如果你的logo存在非正方形比例，不希望给图片容器写死固定宽度，可以通过覆盖Flex子项默认最小宽度规则修复：

/* 给图片容器添加最小宽度重置和禁止收缩属性 */
.d-flex.align-items-center > div:first-child {
  flex-shrink: 0;
  min-width: 0;
}
/* 给图片缩略图容器追加宽度适配规则，原有样式保持不变 */
.site-logo-thumbnail {
  width: fit-content;
}

该方案下图片容器宽度会随logo实际比例自适应，不会被内部100%宽度的img撑满整行，兼容性覆盖所有Webkit内核设备。 #

以上两种方案都不会改动img标签原有width: 100%属性，不会引发你提到的图片尺寸显示异常问题，修改后在苹果设备上两个div可正常并排显示，和Chrome等浏览器的表现完全一致。

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