Inner div with square ratio and flexbox - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

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

Description

Inner div with square ratio and flexbox

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>[SO] Half the height of its parent, must be a square (dimensions unknown)</title> 
  <style>

.flex {<!--from   ww w . j a v a  2 s.c  o  m-->
   display: table-cell; 
   width: 12rem;
   height: 20rem;
   vertical-align: middle; 
   transform: rotate(90deg) translateY(-50%); 
   background-color: lightblue;
}
.flex.large {
   height: 35rem;
}
.item {
   width: 50%;
   height: 0;
   margin-left: 25%; 
   padding-top: 50%; 
   background-color: lightyellow;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="flex"> 
   <div class="item"></div> 
  </div> 
  <hr> 
  <div class="flex large"> 
   <div class="item"></div> 
  </div>  
 </body>
</html>

Related Tutorials