在 Flexbox 中扩展 iframe

Question

我正在尝试拉伸 iframe 的大小以填充我的网络应用程序中的剩余空间。我知道为div 分配了最大空间（通过添加边框），但iframe 高度本身并没有扩大以填充整个垂直高度。

问题是 row content iframe 没有填满整个垂直空间，即使 flexbox 正在适当地分配该空间。

有什么想法吗？

.box {
  display: flex;
  flex-flow: column;
  height: 100vh;
}
.box .row.header {
  flex: 0 1 auto;
}
.box .row.content {
  flex: 1 1 auto;
}
.box .row.footer {
  flex: 0 1 40px;
}
.row.content iframe {
  width: 100%;
  border: 0;
}

<div class="box">
  <div class="row header">
    <h1>Event Details</h1>
    <div id="container">
      <h5>Test</h5>
    </div>
    <div data-role="navbar">
      <ul>
        <li><a href="players.html" class="ui-btn-active ui-state-persist">Players</a>
        </li>
        <li><a href="games.html">Games</a>
        </li>
        <li><a href="chat.html">Chat</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="row content">
    <iframe src="players.html"></iframe>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

Answer 1

这里有两点需要考虑：

1. 当你创建一个弹性容器时，只有子元素成为弹性项目。除了子项之外的任何后代都不是 flex 项，并且 flex 属性不适用于它们。

   您的 iframe 不是弹性项目，因为它是 div class="row content" 的子项目，div class="row content" 是弹性项目，但不是弹性容器。因此，没有弹性属性适用，iframe 也没有理由拉伸。

2. 要将 flex 属性应用于 flex 项的子项，您需要使 flex 项也成为 flex 容器。试试这个：

   .box .row.content {
       flex: 1 1 auto;
       display: flex; /* new */
   }
   

通过上面的调整，iframe 的父级变为（嵌套）弹性容器，iframe 变为弹性项目，默认弹性设置（包括align-items: stretch）生效。 iframe 现在应该占据容器的整个高度。

Answer 2

您可以仅使用 flexbox 修复它，确保 iframe 的容器（包装器）设置了高度或其父级设置了高度，这可以是像素百分比或 VH。和弹性方向：列。 iframe 本身需要一个 flex:1 1 auto;不需要其他任何东西，所以没有设置高度或宽度。

Internet Explorer 的 iframe 宽度可能存在一些问题。但它应该垂直工作。对于 IE11，请确保在包装器上设置 min-height:0。

body{
  padding:1em;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content: center;
  height:100vh;
}

.wrap {
  display: flex;
  flex-direction: column;
  width: 80vw;
  height: 80vh;
  border: 2px solid blue;
  min-height: 0;
}

.frame {
 flex: 1 1 auto;
 border: 0;
}

Simplified jsfidle demo Complex jsfidle demo