Make child fill 100% of parent with padding

Question

I am trying to make a child div using 100% (including padding) of the parents' width and height. Whatever I try it's not working. I tried to add box-sizing = border-box but that didn't change anything. I also tried to add the box-sizing to all elements using * but that didn't change anything either. Here's my code:

html {
  font-size: 16px;
}

.parent {
  font-size: 1rem;
  width: 10em;
  height: 10em;
  padding: 5em;
  background-color: #f0f0f0;
}

.child {
  background-color: #ccc;
  width: 100%;
  height: 100%;
  
/* 
--= 100% should include padding =--
box-sizing: border-box; <-- this didn't change anything...
*/
}

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

Answer 1

A child will be placed outside its parent's padding if it is positioned absolutely, relative to the parent. Use position:absolute like so:

.parent {
  position: relative;
  padding: 2em;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

---

Demonstration:

html {
  font-size: 12px;
}
body {
  margin: 1em;
}

.parent {
  position: relative;
  font-size: 1.2em;
  width: 10em;
  padding: 2em;
  margin:1em 0 0;
  background-color: blue;
  border: 5px solid red;
}

.child {
  position: relative;
  background-color: lightgreen;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

p {
  margin: 0;
}
.red {
  color: red;
}
.blue {
  color: blue;
}
.green {
  color: green;
}

<p>Parent Border: <span class="red">Red</span></p>
<p>Parent Background: <span class="blue">Blue</span> (not visible)</p>
<p>Child Background: <span class="green">Green</span></p>

<div class="parent">
  <div class="child background"></div>
  <div class="child">This text to indicate parent's padding</div>
</div>

Working Example with your code:

html {
  font-size: 16px;
}

.parent {
  position: relative; /* ADDED */
  font-size: 1rem;
  width: 10em;
  height: 10em;
  padding: 5em;
  background-color: #f0f0f0;
}

.child {
  position: absolute; /* ADDED */
  left: 0; /* ADDED */
  top :0; /* ADDED */
  background-color: #ccc;
  width: 100%;
  height: 100%;
}

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

---

An Explanation:

In the absolute positioning model, a box is explicitly offset with respect to its containing block.

Absolute positioning @ w3

If the position property is static or relative, the containing block is formed by the edge of the content box of the nearest ancestor element that is a block container...

If the position property is absolute, the containing block is formed by the edge of the padding box of the nearest ancestor element that has a position value other than static (fixed, absolute, relative, or sticky).

Identifying the containing block @ moz

Emphasis and bold added by me.

Further reference: box model

Answer 2

The only way to do this without changing the parent is by overriding the parent element's padding. To do this, you need to set the width and height to calc(100% + 10em). You will also need to negate the left and top padding to position the element correctly. Set the child to have position: relative and set left and top to be -5em.

html {
  font-size: 16px;
}

.parent {
  font-size: 1rem;
  width: 10em;
  height: 10em;
  padding: 5em;
  background-color: #f0f0f0;
}

.child {
  background-color: #ccc;
  width: calc(100% + 10em);
  height: calc(100% + 10em);
  position: relative;
  left: -5em;
  top: -5em;
}

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