scaling iframe content

HTML

<div class="container">
  <div class="top">I <br> am <br> of <br> flexible <br> height</div>    
  <div class="wrap">
    <iframe class="frame" src="http://time.is"></iframe>
  </div>
</div>

CSS

.container {
    display:flex;
    flex-direction: column;
 
    border:3px solid red;
    
    height:300px;
    width: 300px;
}
.top {
    display:flex;
 
    border:3px solid green;
}


.wrap {
    display:flex;
    flex:1;
    
    border:5px solid blue;
    
    height:100%;
}
.frame {
    width: 400%;
    height: 400%;
    border: 0;
    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.25);
    
    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}