FINALLY! 100% Responsive iFrame for HTML Page Snippet

For the past two years or so I have been battling with Page Snippets' responsiveness (HTML, Embed, and ZML). Furthermore, if you use the native embedded reports, especially more than one report on a page, you have to set a static height because they're not very responsive, and if they are, it's never correct.

I always divert to the iFrames for ease, however, it's been virtually impossible to get the iFrames' responsiveness correct. In the last 24 hours I decided to give it my all, and bam! I got it. I am sharing this because I don't believe anyone on here has shared CSS/HTML that actually works for iFrame responsiveness, including Zoho support. Hope this helps anyone with the same/similar issues.

Also, please note, to keep the entire <div> responsive, it would be best to add content/<div>'s inside the "parent-container" if you need to add more Forms, Reports, etc. to the Page.

The code below is a single <div> containing two separate iFrames/Reports, as seen in the photo examples.

<style>
.parent-container {
display: flex;
width: 100%;
height: calc(100vh - 120px);
}
.child-container {
flex: 1;
margin: 10px;
}
.child-container:first-child {
flex: 0 0 60%;
margin-right: 5px;
}
</style>
<div class="parent-container">
<iframe src="https://creatorapp.zoho.com/App_Admin/App_Name/view-embed/Report_Name" frameborder="0" allowfullscreen class="child-container"></iframe>
<iframe src="https://creatorapp.zoho.com/App_Admin/App_Name/view-embed/Report_Name" frameborder="0" allowfullscreen class="child-container"></iframe>
</div>

The code below is a single <div> containing a single iFrame/Report.

<style>
.parent-container {
display: flex;
width: 100%;
height: calc(100vh - 120px);
}
.child-container {
flex: 1;
margin: 10px;
}
</style>
<div class="parent-container">
<iframe src="https://creatorapp.zoho.com/App_Admin/App_Name/view-embed/Report_Name" frameborder="0" allowfullscreen class="child-container"></iframe>
</div>