I have a page divided into two sections. The page is responsive in the way I want it to be. The problem is, as you can see, that the iframe is not displaying its full content - by cutting the height.
Any suggestions how to make it displayed in the center as it is at the moment but with full height shown?
.c-login__wrapper { justify-content: center; height: 100vh; display: flex; background-color: pink; padding: 5px;}.login-positioner { display: flex; justify-content: center; align-items: center; background-color: green; padding: 5px; width: 50%; height: 100%;}.login { display: flex; justify-content: center; align-items: center; width: 100%; background-color: red; padding: 5px;}.marketing-positioner { display: flex; justify-content: center; align-items: center; background-color: aqua; padding: 5px; width: 50%; height: 100%;}.marketing { display: flex; justify-content: center; align-items: center; width: 100%; background-color: blue;}<html><body><div class="c-login__wrapper"><div class="login-positioner"><div class="login"><form><form action="/action_page.php"><label for="fname">First name:</label><br /><input type="text" id="fname" name="fname" value="John" /><br /><label for="lname">Last name:</label><br /><input type="text" id="lname" name="lname" value="Doe" /><br /><br /><input type="submit" value="Submit" /></form></form></div></div><div class="marketing-positioner"><div class="marketing"><!-- <iframe src="https://www.youtube.com/embed/dXBohfjc4WA" width="100%" height="100%" allowfullscreen frameborder="0"></iframe> --><iframe src="https://yachting.volygroup.com/voly-projects-login-advert" width="100%" height="100%" frameborder="0" allowfullscreen></iframe></div></div></div></body></html>