Iframe overflows parent constraints - html

Question

How can I make this iframe not overflow its blue container but instead fill the blue containers width and height?
In the below snippet, the iframe sits below the blue container. It should sit inside the blue container and take up the remaining page width (100% - 400px) and page height.
html, body {
margin: 0;
height: 100%;
min-width: 1000px; /*For debugging only*/
}
#menu-cnt {
float: left;
width: 400px;
height: 100%;
background-color: red;
}
#iframe-cnt {
width: 100%;
height: 100%;
background-color: blue;
}
#editor {
width: 100%;
height: 100%;
background-color: yellow;
}
<div id="menu-cnt"> </div>
<div id='iframe-cnt'>
<iframe id="editor" src='https://www.google.com' frameborder='0'></iframe>
</div>

Answer 1

I figured it out, I need to use a combination of fixed and absolute positioning.
html, body {
margin: 0;
height: 100%;
min-width: 1000px;
}
#menu-cnt {
position: fixed;
left: 0;
top: 0;
width: 400px;
height: 100%;
background-color: red;
}
#iframe-cnt {
position: absolute;
left: 400px;
top: 0;
right: 0;
height: 100%;
background-color: blue;
}
#editor {
width: 100%;
height: 100%;
}
<div id="menu-cnt"> </div>
<div id='iframe-cnt'>
<iframe id="editor" src='https://www.google.com' frameborder='0'></iframe>
</div>

Answer 2

You are overcomplicating a simple task:
body {
margin: 0;
height: 100vh;
display:flex;
min-width: 1000px;
}
#menu-cnt {
width: 400px;
background-color: red;
}
#iframe-cnt {
min-width:0;
flex:1;
background-color: blue;
}
#editor {
width: 100%;
height: 100%;
background-color: yellow;
}
<div id="menu-cnt"> </div>
<div id='iframe-cnt'>
<iframe id="editor" src='https://www.google.com' frameborder='0'></iframe>
</div>