Nested flex elements in a container without a specified height - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Height

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

Description

Nested flex elements in a container without a specified height

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

.wrapper {<!--from w ww . j  a v a2s. co m-->
   display:flex;
   height: 80vh;
}
.buy-details {
   width: 350px;
   padding: 10px;
   border: 1px solid black;
}
.imperial-image-wrap {
   width:calc(100%-350px);
   height:80vh;
}
.imperial-image-card {
   height:100%;
   display:flex;
   flex-direction: column;
}
.image-icon-container {
   flex:1;
   display:flex;
}
.action-icons {
   border: 1px solid purple;
   display:flex;
   justify-content:center;
}
.asset-description {
   width: 100%;
   border: 1px solid red;
}
.previous, .next {
   min-width: 45px;
   border: 1px solid red;
}
figure {
   display:flex;
   width: 100%;
   max-height: 100%;
}
img {
   max-width: 100%;
}


      </style> 
 </head> 
 <body translate="no"> 
  <div class="wrapper"> 
   <div class="imperial-image-wrap"> 
    <section class="imperial-image-card"> 
     <div class="image-icon-container"> 
      <div class="previous"> 
      </div> 
      <figure> 
       <img src="https://www.java2s.com/style/demo/Firefox.png"> 
      </figure> 
      <div class="next"> 
      </div> 
     </div> 
     <section class="action-icons"> 
      <span>action icons</span> 
     </section> 
     <div class="asset-description"> 
      <div class="asset-title"> 
       <span>This is a test</span> 
      </div> 
     </div> 
    </section> 
   </div> 
   <div class="buy-details"> 
    <span>This is the test</span> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials