css Height on container

I will need some help for the template of my website I'm lost with CSS heights and how they are made.

To understand my issue better I've created an codepen where its possible to visualise my issue in a simple way link

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
  margin: 0;
}

.container {
  height: 100vh;
  background: red;
  width: 100wh;
  over-flow: hidden;
  padding: 1.25rem;
  box-sizing: border-box;
}

.container2 {
  border: 2px solid black;
  height: 100%;
  background-color: blue;
}

.boxtop {
  with: auto;
  height: 20px;
  background-color: pink;
}

.gridcontainer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  height: 100%;
}

.box {
  grid-column: span 4 / span 4;
  background-color: yellow;
  height: 100%;
}

<!-- language: lang-html -->

<div class="container">
  <div class="container2">
    <div class="boxtop"></div>
    <div class="gridcontainer">
      <div class="box">d</div>
      <div class="box">d</div>
    </div>
  </div>
</div>

<!-- end snippet -->

In this link you will see that the yellow part goes way over and I want it to stop at the end of the blue part.

Each box should have the height of container2 - boxtop

Thanks for your help.

To fix this update box height to this height: calc(100% - 20px);. Also, with and over-flow are invalid CSS properties. wh is invalid CSS unit. Update it to overflow: hidden;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* {
  margin: 0;
}

.container {
  height: 100vh;
  background: red;
  width: 100vw;
  overflow: hidden;
  padding: 1.25rem;
  box-sizing: border-box;
}

.container2 {
  border: 2px solid black;
  height: 100%;
  background-color: blue;
}

.boxtop {
  height: 20px;
  background-color: pink;
}

.gridcontainer {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  height: 100%;
}

.box {
  grid-column: span 4 / span 4;
  background-color: yellow;
  height: calc(100% - 20px);
}

<!-- language: lang-html -->

<div class="container">
  <div class="container2">
    <div class="boxtop"></div>
    <div class="gridcontainer">
      <div class="box">d</div>
      <div class="box">d</div>
    </div>
  </div>
</div>

<!-- end snippet -->

First of, some typos: wh is an invalid unit, with is not width, over-flow should be overflow

• use CSS flex
• you don't necessarily need the 20px height if you'll have content in the .boxtop. Let flex calculate the necessary spaces for you
• use the dvh unit for dynamic viewport height

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

* { margin: 0; box-sizing: border-box; }

.container {
  height: 100dvh;
  display: flex;
  background: red;
}

.container2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 1.25rem;
  border: 2px solid black;
  background-color: blue;
}

.boxtop {
  background-color: pink;
}

.gridcontainer {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.box {
  grid-column: span 4 / span 4;
  background-color: yellow;
}

<!-- language: lang-html -->

<div class="container">
  <div class="container2">
    <div class="boxtop">top</div>
    <div class="gridcontainer">
      <div class="box">box 1</div>
      <div class="box">box 2</div>
    </div>
  </div>
</div>

<!-- end snippet -->

You will need to choose the units properly so that they are compatible with each other. For example, in your original code, you have set the container height in vh units, padding in rem units, boxtop in px units, and box height in % units. That is not helping you make the calculations needed to visualize the element sizes. If instead you measured all of the above in vh units, you could do something like this:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

*{
  margin:0;
}
.container{
  height: 100vh;
  background:red;
  width:100%;
  overflow:hidden;
  padding:5vh;
  box-sizing:border-box;
}
.container2{
  border:2px solid black;
  height:100%;
  background-color:blue;
}
.boxtop{
  width:auto;
  height:5vh;
  background-color:pink;
}
.gridcontainer{
  display: grid;
   grid-template-columns: repeat(12, minmax(0, 1fr));
  height:100%;
}
.box{
  grid-column: span 4 / span 4;
  background-color:yellow;
  height: 85vh;
  
}

<!-- language: lang-html -->

<div class="container">
  <div class="container2">
    <div class="boxtop"></div>
    <div class="gridcontainer">
      <div class="box">d</div>
      <div class="box">d</div>
    </div>
  </div>
</div>

<!-- end snippet -->

Here, I have kept the total height as 100vh, padding top and bottom I have applied 5vh each, and the boxtop height is 5vh. So the box height, in order to fit the grid, should have to be (100-5-5-5)vh or 85vh. This should also be responsive if you resize the window because all the elements use the same vertical height unit. Hope this helps.