Css fill parent

Question

I want the blue div to not overflow the red div but always fill parent. I check on stackoverflow and they advised using height:100% but since the child have padding, it overflows. How to do that without changing the style of class parent ?

.parent {
  background: red;
  height: 150px;
  width:300px;
}
.child{
  height: 100%;
  padding:20px;
  width:100px;
 background: blue; 
}

<div class='parent'>
  <div class='child'>
  
  </div>
  </div>

score 1 · Answer 1 · answered Jul 03 '19 at 12:40

Add box-sizing: border-box; more info

* {
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
}
.parent {
  background: red;
  height: 150px;
  width:300px;
}
.child{
  height: 100%;
  padding:20px;
  width:100px;
 background: blue; 
}

<div class='parent'>
  <div class='child'>
  
  </div>
  </div>

score 1 · Answer 2 · answered Jul 03 '19 at 12:48

You can use box-sizing: border-box; or you can calculate height of children like height: calc(100% - 40px */ Your padding */

Solution1

* {
  box-sizing: border-box;
}

.parent {
  background: red;
  height: 150px;
  width: 300px;
}

.child{
  height: 100%;
  padding: 20px;
  width: 100px;
  background: blue;
}

Solution2

.parent {
  background: red;
  height: 150px;
  width: 300px;
}

.child{
  height: calc(100% - 40px);
  padding: 20px;
  width: 100px;
  background: blue;
}

Css fill parent

2 Answers2