html - 在 Flexbox 中扩展 iframe

Question

我正在尝试拉伸(stretch) 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 元素。子项之外的任何后代都不是 flex 元素， flex 属性不适用于它们。

   您的 iframe 不是 flex 元素，因为它是 div class="row content" 的子元素，后者是 flex 元素，但不是 flex 容器。因此，没有应用任何 flex 属性，iframe 也没有理由拉伸(stretch)。

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

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

通过上面的调整，iframe 的父级变成了一个(嵌套的)flex 容器，iframe 变成了一个 flex item，默认的 flex 设置(包括 align-items: stretch) 生效。 iframe 现在应该占据容器的整个高度。