css - flex-child 内 iframe 上的 height="100%" 在 Safari 中不起作用

Question

为什么height="100%"在<iframe>Safari 中无效，您将如何解决此问题？

.flex {
  display: flex;
  flex-direction: column;
  width: 400px;
  height: 300px;
  background-color: #ddd;
}

.name {
  line-height: 32px;
}

.flex-grow {
  flex-grow: 1;
}

iframe {
  width: 100%;
  height: 100%; /* Works in Chrome and Firefox, but not Safari. */
  border: 0;
  background-color: tomato;
}

<div class="flex">
  <div class="flex-grow">
    <iframe></iframe>
  </div>
  <div class="name">My iframe</div>
</div>

标签： cssiframesafariflexbox