Engrain by ByteRush

WEB.10.02 Mid-level· 11 minCore — asked often

Container queries and fluid design: components that fit wherever they go

Style components by the size of their container with container-type and @container, use container units, build fluid type with clamp(), and fix mobile 100vh bugs with svh, lvh and dvh.

Comes up in: Web fundamentals, Frontend system design

Learn#

Nisha’s design system has one product card. It looks right in the main column but breaks in the sidebar and in a three-column grid. Media queries ask about the screen, but the card cares about the space it was given.

A container query styles an element by the size of an ancestor container instead of the viewport:

.card-wrap { container-type: inline-size; }
.card { display: grid; gap: 12px; }
@container (min-width: 400px) {
  .card { grid-template-columns: 160px 1fr; }
}
.card h3 { font-size: clamp(1rem, 0.8rem + 2cqi, 1.5rem); }

The same card now adapts in every slot. Chrome 105, Firefox 110, Safari 16.

A container unit such as cqi is 1% of the container’s inline size, so type can scale with the card.

One card, two containers, two layoutsStep 1 of 4

Page

  • main: .card-wrap 700px
  • aside: .card-wrap 260px

State

    empty

    The same product card is used in a wide main column (700px) and a narrow sidebar (260px).

    Read the steps as text
    1. The same product card is used in a wide main column (700px) and a narrow sidebar (260px).
    2. Each .card-wrap has container-type: inline-size, so its children can query its width.
    3. @container (min-width: 400px) matches only in main: that card puts the image beside the text.
    4. In the sidebar the query fails, so the card stacks. The viewport width never mattered.

    Predict#

    Predict first

    On a phone, a full-screen hero uses height: 100vh. The bottom button is hidden under the browser's toolbar. Why?

    Interview angle#

    Say it like this — about 30 seconds

    “Container queries let a component respond to the size of its container instead of the viewport. I set container-type inline-size on a wrapper, then write @container rules for the component. That is better for reusable components, because the same card can sit in a wide column or a narrow sidebar. Container units like cqi scale with the container. For fluid type I use clamp with a minimum, a viewport-based middle and a maximum. On mobile, 100vh overflows behind the toolbar, so I use dvh or svh.”

    Stays on your device. Nothing is uploaded.
    Follow-up What are container queries, and why are they better than media queries for components?
    They query the size of an ancestor container, so a component adapts to its slot in any layout, not just to the screen.
    Follow-up Why does 100vh cause problems on mobile? What is the fix?
    vh is the large viewport, so content goes under the browser toolbar; use svh for always-visible or dvh for a value that tracks the toolbar.
    Follow-up What does container-type: inline-size cost?
    The container’s own width can no longer depend on its children (size containment on that axis), so it must get its width from its parent.

    Practice#

    Guided

    Generate fluid clamp() values, the way fluid-type calculators do, and compute the size at any viewport.

    Done when

    • fluid gives the right slope and intercept, rounded to 2 decimals without trailing zeros.
    • sizeAt follows the same line and clamps at both ends.
    Your solution
    Ctrl/⌘ + Enter

    Remember#

    Try to answer each card before you open it. Then add them to your reviews.

    Which property makes an element a size container?

    container-type: inline-size (or size).

    What is 1cqi?

    1% of the query container's inline size (width in horizontal writing).

    Why does 100vh overflow on phones?

    vh uses the large viewport, as if the toolbar were hidden.

    What does clamp(a, b, c) return?

    b, but never below a or above c.

    Go deeper

    Four layers. Stop at the one your interview needs; each ends with a quick check.

    The core ideaEvery round
    clamp(min, preferred, max) gives fluid sizes with limits. Mix units in the preferred value, such as 1rem + 1vw, so text still grows when users zoom.
    Check yourself: What does clamp(16px, 4vw, 24px) give at a 300px viewport?

    16px, because 4vw is 12px, below the minimum.

    How it works underneathSenior rounds

    container-type: inline-size applies size containment on the inline axis, which avoids loops: child styles depend on the container, so the container’s width cannot depend on the children. Name containers with container-name to query a specific one .

    Check yourself: Why can't a query container's width depend on its children?

    That would be circular: children's styles depend on the container's size.

    Edge cases and trapsWhere people slip
    Dynamic viewport units (dvh) track the current viewport as toolbars move; svh is the smallest, lvh the largest. Chrome 108, Firefox 101, Safari 15.4. dvh can cause resize work while scrolling, so prefer svh for layout.
    Check yourself: svh vs dvh?

    svh is the smallest viewport (toolbar shown); dvh changes as the toolbar shows and hides.

    In productionStaff-level answers

    Use container queries for components and media queries for page layout and user preferences. Style queries (@container style(--theme: dark)) also exist, with narrower support .

    Check yourself: Can container queries query anything besides size?

    Yes: style queries on custom properties, and scroll-state queries in newer browsers.

    Finished the five steps? Mark it, and its cards join your reviews.

    Last checked 2026-11-01. Spot a mistake? Use “Report an error” below — fixes are listed on the corrections page.

    Interview questions this answers

    • What are container queries and why are they better than media queries for components?
    • Why does 100vh cause problems on mobile? What is the fix?