在Flexbox中扩展iframe

Question

我正在尝试扩展其大小iframe以填充我的Web应用程序中的剩余空间.我知道为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属性不适用于它们.

   您iframe不是灵活项目,因为它是灵活项目的子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。和 flex-direction:column。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;
}

简化的 jsfidle 演示 复杂的 jsfidle 演示