CSS height: 100% vs height: inherit

height: 100% will match the height of the element's parent, regardless of the parent's height value.

height: inherit will, as the name implies, inherit the value from it's parent. If the parent's value is height: 50%, then the child will also be 50% of the height of it's parent. If the parent's size is defined in absolute values (e.g. height: 50px), then height: inherit and height: 100% will have the same behaviour for the child.

height: inherit The inherit keyword specifies that a property should inherit its value from its parent element.

height: 100% Defines the height in percent of the containing block

For examples, look here