element 怎么设置里的iframe大小占满剩余空间？

Question

element 怎么设置<el-main>里的iframe大小占满剩余空间？设置iframe的width，height的百分比，火狐和谷歌的显示还不一样，怎么解决？

<style>
 
  .el-main {
 background-color: rosybrown;
 color: #333;
 text-align: center;
 line-height: 84vh;
  }

</style>

    <el-main>
                <iframe style="width:100%"  src="http://www.runoob.com">
                
                </iframe>
            </el-main>

style怎么设置？
谷歌浏览器显示效果。
火狐浏览器显示效果
如果iframe的width调大了，火狐的范围下的el-main的高度会扩大，有什么解决办法么？

Answer 1

思路原理是这样：

外层el-main用flex纵向布局，display: flex; flex-direction: column;
里层iframe设置display: block; flex: 1;，充满整个高度