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 css3.info. 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 css3.info page to which you linked. Look at the compatibility they listed. Surprising! IE10&11!