这是一个在Vue项目中嵌套iframe产生的问题，具体表现为：在Safari浏览器中，页面渲染完成后，拉伸页面宽度，iframe中的内容高度溢出，且无法滚动到溢出部分。
chrome、firefox都没有发生这个问题，虽然知道是CSS在Safari中的解析差异引起的，但具体是什么原因，还需要做定位，避免后续同类问题的采坑。
vue项目源代码大致如下：
<html>
<head>
<style>
.app { width: 100%;height: 100%;display: flex;flex: 1;flex-direction: column; }
header { width: 100%;height: 75px; }
main { flex: 1; }
iframe { width: 100%;height: 100%;}
</style>
</head>
<body>
<div class="app">
<header></header>
<main>
<iframe v-if="true"></iframe> <div v-else></div>
</main>
</div>
</body>
<html>上面代码乍看没啥问题，可以在chrome中完美执行，但其实踩了spec的一个坑
大体意思是，具有百分比高度的元素的父级必须具有已定义的高度,并且必须具有height属性.否则,具有百分比高度的元素必须默认为height：auto(内容高度)。
chrome会自动弥补这个问题，但是Safari会认为这是一个缺陷，iframe的父级没有给定的高度，直接导致iframe高度塌陷（随内容高度）。所以在拉伸浏览器窗口的时候，iframe内容实际高度产生了变化，导致该问题的出现。
解决方案：
1. 给定父级指定高度
main { flex: 1;height: calc(100% - 75px); }2. 直接给iframe子级指定高度
iframe { width: 100%; height: calc(100vh - 75px); }这里不用100% - 75px，是因为100%依赖于父级指定高度，而vh是直接已浏览器可是窗口高度为基准的。
但是解决方案1、2(之前漏写，感谢评价指出错误)存在一个问题：在低版本Safari，不支持height: calc() 方法，MDN解释。
