height : 100% not being inherited

Question

I'm trying to align a property in css with :

display: flex;
justify-content: center;
align-items: center;

body has height :100%, and the described element is the first nested element in body, why it isn't receiving 100% height ?

codesandbox.io

Answer 1

Kindly add height: 100%; to the id root as you are working with react.

#root {
  height: 100%;
}