iPad（第6代/Pro，iOS11-12）上IFrame无法收缩致布局破裂问题

最近碰到一个头疼的兼容性问题：在**iPad第6代或Pro（iOS 11-12）**的原生Safari里，我的布局中的<iframe>会被异常拉伸，而且手动设置width样式完全不起作用，整个布局直接破裂。但奇怪的是，这个布局在Nexus 7设备以及iPad的Chrome模拟器里都能正常显示。

我的核心代码结构是这样的：

<div class="content"> 
  <div class="sidebar"></div> 
  <iframe class="iframe" src="content.html" frameborder="0"></iframe>
</div>

问题根源 #

查了资料才发现，这是iOS 11-12版本Safari的一个已知Flexbox布局bug：当iframe作为弹性布局的子元素时，Safari不会给它应用默认的min-width: auto约束，导致iframe会无视容器宽度，无限拉伸撑破布局。而其他现代浏览器（包括Chrome模拟器）已经修复了这个问题，所以表现正常。

几个可行的修复方案 #

方案1：给iframe添加min-width: 0样式

这是最直接有效的方法，强制Safari正确计算iframe的最小宽度，让它能在空间不足时自动收缩：

.iframe {
  width: 100%; /* 或者你需要的固定宽度 */
  min-width: 0; /* 关键修复属性 */
  flex-shrink: 1; /* 确保iframe具备收缩能力 */
}

同时别忘了确保父容器的弹性布局设置正确：

.content {
  display: flex;
  overflow: hidden; /* 防止内容溢出容器 */
}
.sidebar {
  width: 200px; /* 侧边栏固定宽度 */
  flex-shrink: 0; /* 侧边栏不随空间变化收缩 */
}

方案2：用容器包裹iframe

如果方案1效果不理想，可以给iframe套一层容器，让容器来承担弹性布局的尺寸控制，避免iframe直接暴露在Flexbox环境中：

<div class="content"> 
  <div class="sidebar"></div> 
  <div class="iframe-container">
    <iframe class="iframe" src="content.html" frameborder="0"></iframe>
  </div>
</div>

对应的CSS设置：

.iframe-container {
  flex: 1; /* 占据容器剩余空间 */
  min-width: 0; /* 同样需要添加这个属性避免容器拉伸 */
  overflow: hidden;
}
.iframe {
  width: 100%;
  height: 100%;
  display: block; /* 去除iframe默认的内联元素间距 */
}

方案3：iOS Safari专属hack

如果前两种方法还是有兼容性残留，可以针对iOS 11-12的Safari写特定样式：

/* 仅匹配iOS 11-12的Safari浏览器 */
@supports (-webkit-touch-callout: none) and (not (translate: none)) {
  .iframe {
    min-width: 0 !important;
    width: 100% !important;
  }
}

验证效果 #

应用上面任意一种方案后，在iPad iOS11-12的原生Safari中测试，iframe应该会自动收缩到容器允许的宽度，完整展示布局，和其他设备上的表现一致。

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