Scaling iframe content inside flexbox model - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Container

Description

Scaling iframe content inside flexbox model

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <title>scaling iframe content</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.container {<!--from   w  w w.j a v  a2  s  .c  om-->
   display:flex;
   flex-direction: column;
   border:3px solid red;
   height:300px;
   width: 300px;
}
.top {
   display:flex;
   border:3px solid green;
}
.wrap {
   flex:1;
   flex-direction: column;
   align-items: stretch;
   border:5px solid blue;
   height: 100%;
}
.frame {
   width: 400%;
   height: 768px;
   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;
}


      </style> 
 </head> 
 <body> 
  <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>  
 </body>
</html>

Related Tutorials