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

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

#1

I am trying to make an iframe to be responsive but to keep its aspect ratio when it’s 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.