How to make flexbox children 100% height of their parent using CSS? - GeeksforGeeks

30 Jul, 2021
CSS Flexbox is an awesome tool to create website layouts. Making a flex-box child 100% height of their parent can be done in two ways. It is little tricky because, certainly it will display an error. For example, the child may flow out of the parent boundary or it may not get upto 100% height that you will see in your browser output.Example 1: This example makes a child flex-box of height 100% using CSS. 
html
<!DOCTYPE html><html>   <head>      <title>          Make flex-box child height 100%      </title>              <style>         * {             padding: 0;             margin: 0;         }         .container {             width: 100vw;             height: 50vh;             background-color: green;             display: flex;             justify-content: center;             align-items: center;         }         .child-div {             height: 100%;             background-color: red;             margin: 0 20px;         }      </style>   </head>        <body>      <div class="container">         <div class="child-div">            One         </div>         <div class="child-div">            Two         </div>         <div class="child-div">            Three         </div>         <div class="child-div">            Four         </div>         <div class="child-div">            Five         </div>      </div>   </body></html>
Output:  
Example 2: The second way to achieve this by using align-items property in the parent div to ‘stretch’. It makes every .child-div 100% height of it’s parent height.  
html
<!DOCTYPE html><html>   <head>      <title>          Make flex-box child height 100%      </title>              <style>         *{             padding: 0;             margin: 0;         }         .container{             width: 100vw;             height: 50vh;             background-color: green;             display: flex;             justify-content: center;         }         .child-div{             background-color: red;             margin: 0 20px;         }      </style>   </head>        <body>      <div class="container">         <div class="child-div">            One         </div>         <div class="child-div">            Two         </div>         <div class="child-div">            Three         </div>         <div class="child-div">            Four         </div>         <div class="child-div">            Five         </div>      </div>   </body></html>
Output:  
Example 3: This example makes width of child to 100% of there parent.  
html
<!DOCTYPE html><html>   <head>      <title>          Make flex-box child width 100%      </title>              <style>         * {             padding: 0;             margin: 0;         }         .container {             width: 100vw;             height: 50vh;             background-color: green;             display: flex;             flex-direction: column;             justify-content: center;         }         .child-div {             background-color: red;             margin: 20px 0;             padding: 5px;         }      </style>   </head>        <body>      <div class="container">         <div class="child-div">            One         </div>         <div class="child-div">            Two         </div>         <div class="child-div">            Three         </div>         <div class="child-div">            Four         </div>         <div class="child-div">            Five         </div>      </div>   </body></html>
Output:  
 Supported Browser:
Google Chrome 29.0
Internet Explorer 11.0
Firefox 22.0
Opera 48
Safari 10
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
surindertarika1234
ysachin2314
CSS-Questions
Picked
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to create footer to stay at the bottom of a Web page?
Types of CSS (Cascading Style Sheet)
Primer CSS Flexbox Flex Direction
HTML Course | First Web Page | Printing Hello World
How to position a div at the bottom of its container using CSS?
How to set input type date in dd-mm-yyyy format using HTML ?
Types of CSS (Cascading Style Sheet)
HTML | <img> align Attribute
Form validation using HTML and JavaScript
How to set the default value for an HTML <select> element ?