cqmin
One percent of whichever side of the container is shorter.
Safe to useBaseline: widely available
| Browser | Since |
|---|---|
| Chrome | 105+ |
| Chrome Android | 105+ |
| Edge | 105+ |
| Firefox | 110+ |
| Firefox Android | 110+ |
| Safari | 16+ |
| Safari iOS | 16+ |
Formula 1cqmin = min(1cqi, 1cqb)
How it works
1cqmin is the smaller of 1cqi and 1cqb. In a container 300px wide and 500px tall it is 3px, from the width. Make the container 500px wide and 300px tall and it is still 3px, now from the height. The unit follows whichever dimension is currently tighter, so a square sized with 100cqmin fits inside the container’s content box in either orientation.
That needs a container with both sizes, which means container-type: size. With only inline-size and no outer size container, the block axis takes the small viewport instead, and cqmin becomes the smaller of the container’s width and the window’s height. A container 400px wide in a window 200px tall gave 10cqmin of 20px, not 40px. The shape stops tracking its container without any error.
Use it for shapes that must stay inside their box whatever the shape of the box is: a dial, a logo plate, a square thumbnail.
Try it
A container you can resize
Drag the sliders. The box is a real query container, and the readings are 10 of each container unit measured inside it.
- Container, measured
- 300 × 140px
10cqw- 30px
10cqh- 14px
10cqi- 30px
10cqb- 14px
10cqmin- 14px
10cqmax- 30px
The same as a table
| Unit | 300 × 140px | 500 × 140px |
|---|---|---|
10cqw | 30px | 50px |
10cqh | 14px | 14px |
10cqi | 30px | 50px |
10cqb | 14px | 14px |
10cqmin | 14px | 14px |
10cqmax | 30px | 50px |
What changes it
- Moves with
- page zoom
- the query container
- the writing mode
- Stays put under
- the reader's text size
- the window size
- the font in use
- phone toolbars
Reach for it when
Squares and icons that must fit the container in both directions.
Watch out
With container-type: inline-size the block axis is not measured, so cqb, and with it cqmin and cqmax, looks further up the tree or is replaced by the small viewport height. Use container-type: size for both axes.
.tile .glyph {
inline-size: 50cqmin;
aspect-ratio: 1;
}