How to set child div height same as parent

Question

May be it is a duplicate question . Others' are not matching with my requirement
i have 3 child div(secound-div-inner-single(class name)).
I have to set the height of this 3 div same as the height of parent div(secound-div-inner) or simply 3 div with same height as per the height of largest one

    .secound-div {
        padding: 2rem 1rem;
        margin-bottom: 1rem;
        background-color: #333;
        border-radius: 0.3rem;
        margin-top: 1rem;
        display: inline-block;
        width: 100%;
    }
    
    .secound-div-letter-color {
        color: #fff;
    }
    
    .secound-div-heading {
        color: #e9e03b;
        text-align: center;
        font-family: 'Times New Roman';
    }
    
    .labels {
        color: #e9e03b;
        text-align: center;
        font-family: 'Times New Roman';
    }
    
    .secound-div-heading2 {
        color: #b4b00b;
        text-align: center;
        font-family: 'Times New Roman';
    }
    
    .secound-div-inner {
        text-align: center;
        background-color: #333;
        font-size: medium;
        font-weight: 500;
        font-family: 'Times New Roman';
        color: #e9e03b;
        height: 100%;
    }
    
    .secound-div-inner-single {
        background-color: #fff;
        color: #b4b00b;
        padding: 25px;
        margin-bottom: 1rem;
        
    }

<div class="container-fluid">
     <div class="row">
        <div id="#About" class="col-md-12">
        <div class="secound-div">
        <hr class="line" />
        <div class="secound-div-heading">
            <h1>Heading</h1>
        </div>
        <hr class="line" />
        <div id="parent" class="secound-div-inner">
            <div class="col-md-4">
                <div id="child" class="secound-div-inner-single">
                    <div class="secound-div-heading2 ">
                        <h1>Heading 1</h1>
                        <hr class="line" />
                    </div>
                    <p>
                        Div1
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="secound-div-inner-single">
                    <div class="secound-div-heading2">
                        <h1>Heading 2</h1>
                        <hr class="line" />
                    </div>
                    <p>
                        Div2
                    </p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="secound-div-inner-single">
                    <div class="secound-div-heading2">
                        <h1>Heading 3</h1>
                        <hr class="line" />
                    </div>
                    <p>
                        Div3
                    </p>
                </div>
            </div>
        </div>
        </div>
        </div>
        </div>
    <div>

And the child div should behaves as row when screen size changed

Answer 1

You are right, this is a duplicate question. However, by now you have various ways to solve this issue:

For modern browsers

If you do not need to support older browsers (especially IE10/older), you can work with grid or flexbox designs. The benefit of those approaches is, that it is very easy to implement and the resulting code is rather succinct and therefore easy to understand.

With flexbox:

#parent {
    display: flex;
}

.children {
    height: 100%;
}

This is nice and simple but will get difficult if your designs are growing more complex. In this case you could move to grid...

With grid:

Grids have the advantage that all grid child elements have the same height by default. They also give you a lot of flexibility when it comes to defining gaps between them. However while the FIRST grid child will have the height of its row, the inner children (in your case nested divs) will only take as much space as they need - unless you make them display:grid as well or give them height:100%. Here is an example:

#parent {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 10px;
}

#parent > * {
  display: grid;
}

For older browsers

Honestly, this really is a pain. You seem to use bootstrap or a similar framework. There are some tricks how you can achieve this (e.g. enter link description here) but from my experience it all is rather tedious.

In general your approach can be to make sure that all elements (parent and all ids nested children) pass down the 100% height property. But it comes with its own pros and cons. You will find plenty advice addressing this matter but as I said: If you don't need the compatibility there are many advantages using a different approach.

Answer 2

You can use CSS Flexbox on the #parent, like:

#parent {
  display: flex;
  flex-wrap: wrap; /* to wrap the divs on smaller devices (mobile) */
}

And give .secound-div-inner-single a height: 100%, like:

.secound-div-inner-single {
  height: 100%;
}

Have a look at the snippet below (Use full page preview):

#parent {
  display: flex;
  flex-wrap: wrap;
}

.secound-div {
    padding: 2rem 1rem;
    margin-bottom: 1rem;
    background-color: #333;
    border-radius: 0.3rem;
    margin-top: 1rem;
    display: inline-block;
    width: 100%;
}

.secound-div-letter-color {
    color: #fff;
}

.secound-div-heading {
    color: #e9e03b;
    text-align: center;
    font-family: 'Times New Roman';
}

.labels {
    color: #e9e03b;
    text-align: center;
    font-family: 'Times New Roman';
}

.secound-div-heading2 {
    color: #b4b00b;
    text-align: center;
    font-family: 'Times New Roman';
}

.secound-div-inner {
    text-align: center;
    background-color: #333;
    font-size: medium;
    font-weight: 500;
    font-family: 'Times New Roman';
    color: #e9e03b;
    height: 100%;
}

.secound-div-inner .col-md-4 {
    flex-basis: 33.33%;
    padding: 15px;
}

.secound-div-inner-single {
    background-color: #fff;
    color: #b4b00b;
    padding: 25px;
    margin-bottom: 1rem;
    height: 100%;
}

.secound-div-inner .col-md-4 {
    flex-basis: 33.33%;
    padding: 0 15px;
}

@media screen and (max-width: 767px) {
  .secound-div-inner .col-md-4 {
      flex-basis: 100%;
      padding: 15px;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
 <div class="row">
    <div id="#About" class="col-md-12">
    <div class="secound-div">
    <hr class="line" />
    <div class="secound-div-heading">
        <h1>Heading</h1>
    </div>
    <hr class="line" />
    <div id="parent" class="secound-div-inner">
        <div class="col-md-4">
            <div id="child" class="secound-div-inner-single">
                <div class="secound-div-heading2 ">
                    <h1>Heading 1Heading 1Heading 1Heading 1Heading 1Heading 1Heading 1Heading 1</h1>
                    <hr class="line" />
                </div>
                <p>
                    Div1
                </p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="secound-div-inner-single">
                <div class="secound-div-heading2">
                    <h1>Heading 2</h1>
                    <hr class="line" />
                </div>
                <p>
                    Div2
                </p>
            </div>
        </div>
        <div class="col-md-4">
            <div class="secound-div-inner-single">
                <div class="secound-div-heading2">
                    <h1>Heading 3</h1>
                    <hr class="line" />
                </div>
                <p>
                    Div3
                </p>
            </div>
        </div>
    </div>
    </div>
    </div>
    </div>
<div>

Hope this helps!