HTML section doesn't match container height

Issue

I made an HTML section. The child is a container with defined height and a few other CSS properties. But as far as I know, nothing that would change the parent. So normally the section would match the height of this container but in this case, it doesn't. Why?

#referencesContainer {
  width: 100%;
  height: 300px;
  padding-top: 5px;
  background: var(--colorFont);
  text-align: center;
  padding: 30px;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
}

<!--HTML section&container-->
<section id="references">
  <div id="referencesContainer" class="lockContainer">
    <h2 class="paddingBottom30"></h2>
    <span>
       <br>
       <br>
    </span>
  </div>
</section>

Solution

This is your parent section

<section id="references">

define an class to this section like this

<section id="references" class="parentclass">

Then gives create css like this

.parentclass{
  width: 100%;
  height: 300px;
  padding-top: 5px;
  background: var(--colorFont);
  text-align: center;
  padding: 30px;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  }

This is your child class

 <div id="referencesContainer" class="lockContainer">

Define their css as like below

.lockContainer {
  width: 100%;
  height: 300px;
  padding-top: 5px;
  background: var(--colorFont);
  text-align: center;
  padding: 30px;
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
}

Your problem is causing by parent class you have to make use they didn't overite it. eg: if 4/4 square are parent class and a child class are 2/2. now i want to make child class 6/6. is it possible. you never make different without defining css of parent class.

you have to write css of parent class if you want to use id do like this

#references{
...
...
....
....
...
}

Answered By - Ronny Dsouza