Make child element 100% width & height of parent element without setting any styles on child element

Issue

I need to make a div.child 100% width and height of div.parent without setting any styles on the div.child using no script or ::before or ::after with pure CSS. Also the div.child has no content.

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

.parent {
 width: 200px;
 height: 100px;
 outline: 1px solid red;
}

Solution

One way to accomplish this without using any pseudoselectors or applying any elements to the .child class is to set the parent to use a grid layout with only one row and one column. This will cause the child to fill the space of the parent, without setting styles on the .child itself.

.parent {
  background-color: #ffaaaa;
  display: grid;
  width: 200px;
  height: 100px;
}


/* Only included to show area of .child element, not necessary */

.child {
  background-color: #aaffaa;
}

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

Answered By - smallpepperz