Unit Rulebook

Type a unit, or a word from its description.

    cqmax

    One percent of whichever side of the container is longer.

    Safe to useBaseline: widely available

    First version with support, from MDN browser data
    BrowserSince
    Chrome105+
    Chrome Android105+
    Edge105+
    Firefox110+
    Firefox Android110+
    Safari16+
    Safari iOS16+

    Formula 1cqmax = max(1cqi, 1cqb)

    How it works

    1cqmax is the larger of 1cqi and 1cqb. A square sized with 100cqmax covers its container fully and spills over on the shorter side: in a container 300px wide and 500px tall it is 500px across. That makes it the unit for backgrounds, decorative circles and cover images that should leave no gap.

    The fallback has a surprising effect here. In a container with only container-type: inline-size, the missing block axis is read from the small viewport, and max keeps whichever number is bigger. Take a 400px-wide container in a window 800px tall. 10cqi is 40px, but 10cqmax is 80px, a tenth of the window’s height, so a number that belongs to nothing in the container wins.

    For a cover shape, set container-type: size and give the container a height. A container that sizes itself from its content cannot supply a block size.

    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
    Ten of each container unit in two containers
    Unit300 × 140px500 × 140px
    10cqw30px50px
    10cqh14px14px
    10cqi30px50px
    10cqb14px14px
    10cqmin14px14px
    10cqmax30px50px

    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

    Cover art inside a container that should reach every edge.

    Watch out

    It follows the larger side, so a shape sized with it overflows the smaller side. Clip the container with overflow if that is not intended.

    Example Covers the tile whatever its shape.
    .tile .wash {
  inline-size: 100cqmax;
  aspect-ratio: 1;
}
    • cqminOne percent of whichever side of the container is shorter.
    • cqhOne percent of the nearest query container's height.
    • vmaxA hundredth of the longer side of the window.

    MDNSpecification