How to do square by height css

Question

I need to make the width and height of the block dynamically equal. But they were equal to the height of the block.

For the width i can write:

width: 100%;
padding-bottom: 100%;
position: absolute;
left: 0;
top: 0;

and block will be Square;

How i can do the same but for height?

some like:

height: 100%;
padding-right: 100%;
position: absolute;
left: 0;
top: 0;

thats not working

Answer 1

You can probably use the vmin unit. You can also use aspect-ratio: but it is not as widely supported.