CSS Flexbox is an awesome tool to create website layouts. Making a flex-box child 100% the height of their parent can be done in two ways. It is a 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 up to 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 is by using the align-items property in the parent div to ‘stretch’. It makes every .child-div 100% height of its 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 the width of the child 100% of their 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
- Firefox 22.0
- Opera 48
- Safari 10
CSS is the foundation of webpages and 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.