Problem: Square Box Filler

15 min

Try to design a set of square elements that always maintain a 1:1 aspect ratio and expand to fit their container’s width, regardless of viewport or container size.

Problem description

Given a container <div> that holds several child <div class="square"> elements, write CSS rules so each child remains a perfect square, filling the container’s width but never overflowing.

Goal

Implement CSS in styles.css so that each .square element scales responsively to fill its container’s width and preserve a 1:1 aspect ratio.

Constraints

Do not modify the HTML structure.
Use only CSS (no JavaScript is allowed).
Elements must maintain a perfect square shape.
Squares must not overflow the container.

Sample visual output

Here’s what the output would look like: