iFrame with embedded Google Calendar overflowing after rotate in iOS - html

Question

I've embedded a Google calendar in a website using an iframe. All is resizing perfectly on browsers, but on iPhone when rotating from vertical to horizontal and back to vertical the embedded calendar overflows the iframe vertically. I only have access to HTML and CSS on this site since it's a CMS.
HTML as follows:
<p class="iframe-container"><iframe allowfullscreen="" frameborder="0" src="https://calendar.google.com/calendar/embed?" width="100%"> . </iframe></p>
CSS as follows:
.iframe-container {
width: 100%;
overflow: hidden;
padding-top: 100%;
position: relative;
}
.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

Answer 1

After weeks of looking I found the solution by trial and error, but have no idea why it's working now. Would still like to hear from experienced folks why this fixes the issue.
HTML as follows:
<div class="googleCalendar"><iframe frameborder="0" src="https://calendar.google.com/calendar/embed?"></iframe></div>
CSS as follows:
.googleCalendar{
position: relative;
height: 0;
width: 100%
overflow: hidden;
padding-bottom: 100%;
}
.googleCalendar iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
overflow: hidden;
padding-bottom: 100%;
}