在iframe上height=“100%”在Safari中,flex child不起作用

.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>