Webkit border-box width/height/padding

Box #0

box-sizing: content-box;

:after { height: 100%; }

Box #1

box-sizing: content-box;

:after { padding-bottom: 100%; }

Box #2

box-sizing: border-box;

:after { padding-bottom: 100%; }

Box #3

box-sizing: border-box;

.box__inner { padding-bottom: 100%; }

Box #4

box-sizing: border-box;

:after { aspect-ratio: 1 / 1 }

Box #4

box-sizing: border-box;

.box__inner { aspect-ratio: 1 / 1 }