I believe you need to set some explicit dimensions for the 'iframe' element. The defaults for many elements will differ across browsers. I added "height:100vh" in your jsfiddle and it looked like what I think you wanted.
Okay, let me begin by saying I've never worked with flex. I was curious enough to play with your jsfiddle, but I know very little about this method. Still, I copied your latest code and when I ran it locally, adding the height:100vh; to the iframe's style, the result looked the same in Firefox, Chrome and IE11. So I made that much progress.
That said, I am unable to explain much of how this code renders. You've got a <span> that appears to be rendered as a block-level element and an iframe that has the same, seemingly arbitrary width in all browsers. In general, I'd avoid using an iframe as a major structural element just to save on sheetrock and aspirin. It all depends on what the 'src' is going to be, of course, but my slothful side would always prefer an 'include' of some kind so I don't have to either create a second complete stylesheet for an internal document or work around the stylesheet of an external document.
Could you share a bit about what your goals are here?