How to create same height div as parent height

Hello artisan,
Today in this blog post I am going to show you how to create same height as parent height div's.

In most of the cases we need to create a div with same height, because if the div has paragraph of unequal length the div will look so wierd which is not good. So make the div of same height we will refer the following code.

Before going further follow me for more posts

Snehal Rajeev MoonFollow

Full Stack Developer by profession, mostly works in Laravel | Vue JS | PHP | Javascript | InertiaJS | Node | Express.

Now, lets see the code

 <h3>Example of same height div with its respective parent height </h3>
 <div class="container">
    <div class="child-div-1"><p>Div 1</p></div>
    <div class="child-div-2"><p>Div 2</p></div>
    <div class="child-div-3"><p>Div 3</p></div>
 </div>

Create a css file and add the below css code

.container {
  display: flex;
  background: #ffc;
  height: 50vh;
}
.child-div-1 {
  background: #000;
  margin-left: 20px;
  height: 100%;
  width: 20vh;
  position:relative;
}
.child-div-1 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  color: #fff;
}

.child-div-2 {
  background: #ee6;
  margin-left: 20px;
  height: 100%;
  width: 20vh;
  position:relative;
}
.child-div-2 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  color: #000;
}

.child-div-3 {
  background: #fdd;
  margin-left: 20px;
  height: 100%;
  width: 20vh;
  position:relative;
}
.child-div-3 p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  color: brown;
}

You can also refer code pen for result

Thank you for reading 🦁 🦄