A super useful recap of the main ways that CSS calculates percentage for element layout, each with a brilliant slider-based demo. The tl;dr:
heightelements are based on the parent's dimensions;
- So are positioning attributes such as
paddingattributes inherit from the parent, but only use the width value (even for things like
transformproperty uses the element's dimensions.