Responsive iframe video does not work in Edge when wrapper element is a flex item

I am trying to make a responsice iframe that keeps its aspect ratio when resized.
There is a popular solution for this using a relatively positioned wrapper with no height and a padding-bottom set to a percentage of the width and then setting the iframe to position: absolute;.
See details here.

The problem is that this does not work in Edge when the wrapper element is a flex item.
Check out this CodePen.

BTW, I noticed that in IE it works but there is another issue that the

element doesn’t wrap and flows out on both sides of the parent element.

Edit 01/09/2018: I found this page on It seems like an issue discussed by the W3C. However, they don’t offer an alternative if they choose to abandon this possibility in Flex.

Edit 01/26/2020: Looks like it’s working now in Edge (the non-Chromium version).

Here’s Microsoft they chose option one in the page to which you linked. Look at the compatibility they listed. Surprising! IE10&11!