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.