Responsive height for iFrame within accordion

Question

Please look at the first accordion (air conditioner) on this website I have built - https://www.savingenergy.org.za/asl/calculation-tools/

The accordion holds an iFrame which displays an html page hosted elsewhere. When the accordion is first opened, all of the iFrame content is shown. But when expanding the content (click the "compare two appliances" radio button) a scroll bar appears. Would it be possible for the height of the accordion/iFrame to become responsive depending on the amount of content shown?

I am currently using the following HTML:

<div class="iframe-container">
   <iframe src="https://storage.googleapis.com/asl-mobile-app/appliance- 
   calculators/website/air_conditioner_website.html"></iframe>
</div>

And CSS

.iframe-container {
    overflow: hidden; 
    padding-top: 56.25%;   
    }

.iframe-container iframe {
    border: 0;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    }

To conclude, I don't want a scrollbar to appear when the iFrame content within the accordion is expanded. Rather, the height of the iFrame or accordion should become responsive.

Thanks