scaling iframe content

by Plippie Plop

HTML

<div class="container"> 
  <nav>
   <a href="#0">Menu Item</a>
   <a href="#0">Menu Item</a>
   <a href="#0">Menu Item</a>
   <a href="#0">Menu Item</a>
  </nav>
  
  <div class="wrap">
    <iframe class="frame" src="http://time.is"></iframe>
  </div>
  
  <footer><p>
  Some footer text
  </p></footer>
  
</div>

CSS

body{
  display:flex;
  flex-direction:column;
  align-items:center;   
}

.container {
  flex:1 1 100vh;
    display:flex;
    flex-direction: column; 
   width:80vw;    
}

nav {
    display:flex;
    flex-direction:row;
  flex: 0 0 auto;
    border:3px solid green;
    padding: .5em 0 .5em .5em;
}

nav a {
  flex:1 1 auto;
  padding:.5em 1em;
  border:1px solid grey;
  border-radius:3px;
  background-color:grey;
  margin-right:.5em;
  text-align:center;
  color:black;
}

.wrap {
    flex:1 1  auto;
    flex-direction: column;
     display:flex;
    border:3px solid blue;
    min-height:0;
    overflow:hidden;
       
}
.frame {
  flex:1 1 auto;       
    border:0;
   
}


footer{
  display:flex;
  align-items:center;
  flex:0 0 50px;
  padding:.5em;
  border:2px solid green;
}