Question

我在Chrome和Opera中使用display: flex显示iframe时遇到问题，它可以在Firefox和IE11中使用。

问题是div中的display: flex内的iframe并没有在chrome和opera等浏览器中占据一席之地。但Firefox和IE11正确显示它。

你能帮我解决一下吗，这样它在Chrome和Opera中也能正确显示。

感谢。

这是Firefox中的输出（正确输出）。

这是Chrome和Opera的输出。

html,
body {
  width: 99%;
  height: 98%;
}

.flex {
  /* basic styling */
  width: 100%;
  height: 100%;
  border: 1px solid #555;
  font: 14px Arial;
  overflow: auto;
  /* flexbox setup */
  display: -webkit-flex;
  -webkit-flex-direction: column;
  display: flex;
  flex-direction: column;
}

.flex > div:nth-child(1) {
  background: #009246;
  -webkit-flex: 0 0 auto;
  flex: 0 0 auto;
}

.flex > div:nth-child(2) {
  background: #CE2B37;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 300px;
}

.flex > div:nth-child(2) iframe {
  width: 99.5%;
  height: 99%;
}

<body>
  <div class="flex">
    <div>test</div>
    <div>
      <iframe src="#"></iframe>
    </div>
  </div>
</body>

Flexbox在Chrome和Opera中的高度问题

0 个答案: