iframe в компоновке сетки CSS изменяет размеры самостоятельно

Question

Я пытаюсь сделать браузер miniture в браузере, и я работаю над макетом в CSS. У него есть сетка, и в середине есть iframe. Я загружаю bing для тестирования, так как он не мешает помещать его в iframe, но когда я нажимаю ссылки на главной странице, размер рамки изменяется. Мой CSS:

body {
 display: grid;
 grid-template-columns: 1fr;
 grid-template-rows: 3em 1fr 3em;
 grid-template-areas: "navbar" "page" "buttons";
}
body, html{
width:100%;
height:100%;
margin:0;
padding:0;
border:0;
box-sizing:border-box;
}
nav.url{
grid-area:navbar;
}
.page{
grid-area:page;
}
.page iframe{
   width: 100%;
   height: 100%;
   border: 0;
margin:0;
padding;0;
overflow:auto;
display:block;
}

nav.buttons{
grid-area:buttons;
background:#efe;
}

Мой HTML:

<nav class="url"></nav>
<div class="page"><iframe src="//bing.com"></iframe>
</div>
<nav class="buttons"></nav>

Остальная часть кода здесь: https://jsbin.com/sezuyododu/edit