Scrolling dilemma with content of variable/dynamic height

I have a page with that displays a multi-step form in an <iframe>. The form is from a 3rd party service so I have no control over usage of the <iframe> or any of its content's styling... including width. The general layout of the page looks like this:

This is all well and good for Step 1 of the form, but in Step 2, the length of the form more than triples. I have no way of knowing the height of the content at each step and therefore can't resize the height of the <iframe> accordingly, so unless I want the <iframe> to scroll, I have to set its height to something ridiculously large (which will probably look pretty odd on Step 1)...

So I feel like my only option here is to keep the <iframe> sized at its Step 1 height and have it scroll for steps 2 and 3:

And this brings me to my real question: I personally don't like scrolling frames within an already-scrolling parent page. It usually feels clunky and awkward... especially on mobile devices. But I see it quite frequently... is this just a bad design pattern being used so much it becomes acceptable? And how does scrolling a long form in a container one third of its height affect usability?

Any insight or suggestions for improvement (given the limitations I'm facing with the 3rd party's content (and the <iframe> itself for that matter) would be greatly appreciated.