And other fixed ratio elements
This square edges are always equal to 50% of the width of the page. Try shrinking or enlarging the browser.
This square dimensions are only defined by width:50% and padding-bottom:50%.
The counter-intuitive rule its based on is: a percentage value on top/bottom padding or margins is relative to the width of the containing block
Using this rule you can create elements that are responsive or elastic, but always keep the same ratio. Check below for a video container example.
Open this site in Webflow
Responsive Video Container
This element always keep a 16/9th ratio (for HD video). Try shrinking or enlarging the browser.
This element dimensions are only defined by width:50% and padding-bottom:28.125%.