flexbox项中youtube-iframe的高度错误

Question

我不明白为什么这不适用于MS Edge 15/16（适用于Edge 17）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="page">
  <div id="box-first">
    <div id="first">
    </div>
  </div>

  <div id="box-second">
    <div id="second">
    </div>
  </div>
</div>

scss

<div class="row">
  <div class="video">
    <iframe src="https://www.youtube.com/embed/xcJtL7QggTI?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

CodePen：https://codepen.io/alfredbez/pen/MqaLbY?editors=1100
博客文章：https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

这是Edge 15的外观：

这是它在chrome中的外观：