How to force child div to be 100% of parent div’s height without specifying parent’s height with CSS?

To force child div to be 100% of parent div’s height without specifying parent’s height with CSS, we use flexbox.

For instance, we write

.parent {
  display: flex;
  flex-direction: row;
}

.child {
  align-self: center; 
}

to make the element with class parent a flex container with display: flex;.

And then the children element should fill the parent’s height by default.