How to make a child div same height as parent and make its width equal its height?

Question

Suppose I want to place a div inside another div, but the child div must have the same height as the parent div and its width must equal its height. However, I can't use absolute values for the height/width because the container's (parent's) dimensions aren't absolute values.

Essentially something that looks sort of like this:

|----------------------------------------------------------|
|           |                                              |
|    child  |                                              |
|     div   |                    parent div                |
|           |                                              |
|----------------------------------------------------------|

I don't know how to make the child's width equal its height. It's simple to set height: 100% on the child, but I've got no clue as to how I can set its width relatively.

Answer 1

If you can use modern CSS, you can use

height: 100%;
aspect-ratio: 1;

on your child to force it into being a square.

(aspect-ratio is supported by 80% of users and all major browsers)