Size transition
Smoothly transition height and width — including to and from auto — with interpolate-size.
height: auto using interpolate-size: allow-keywords. No max-height hack needed — the browser interpolates to the intrinsic size natively.Quick implementation
/* Height transition to auto using interpolate-size */
.expandable {
interpolate-size: allow-keywords;
height: 3rem;
overflow: hidden;
transition: height 0.4s ease;
}
.expandable:hover,
.expandable:focus-visible {
height: auto;
}
/* Classic max-height fallback */
.expandable-fallback {
max-height: 3rem;
overflow: hidden;
transition: max-height 0.4s ease;
}
.expandable-fallback:hover,
.expandable-fallback:focus-visible {
max-height: 20rem; /* generous upper bound */
}
/* Width transition */
.progress-bar {
width: 30%;
transition: width 0.5s ease;
background: oklch(0.52 0.22 265);
}
.progress-bar:hover {
width: 100%;
}
@media (prefers-reduced-motion: reduce) {
.expandable,
.expandable-fallback,
.progress-bar {
transition-duration: 0.01s;
}
}Prompt this to your LLM
Includes role, constraints, two framework variants, and edge cases to handle.
You are a senior frontend engineer building collapsible panels.
Goal: Smoothly transition an element's height from a fixed value to auto (its intrinsic content height) using CSS only — no JavaScript measurement.
Technical constraints:
- Use interpolate-size: allow-keywords to enable transitioning to height: auto.
- Provide a max-height fallback for browsers that don't support interpolate-size.
- Transition duration 0.3–0.5s with ease timing.
- Use oklch() for all color values — no hex or rgba().
- Add overflow: hidden on the collapsed state to clip content.
Framework variant (pick one):
A) Vanilla HTML + CSS only — trigger with :hover or :focus-within.
B) React component — accept isOpen prop, use className toggle for expanded/collapsed states.
Edge cases to handle:
- Respect prefers-reduced-motion: set duration to near-instant.
- The max-height fallback should use a generous value (e.g. 100vh) but be aware the timing feels off when content is much shorter than the max.
- Ensure keyboard accessibility via :focus-visible trigger or focus-within on a parent.
Return HTML + CSS.Why this matters in 2026
Transitioning to height: auto was the single most-requested CSS feature for over a decade. The old max-height hack always felt sluggish because the browser animated toward a hardcoded upper bound, not the real content size. With interpolate-size: allow-keywords, the browser resolves the intrinsic size at transition time and interpolates to it directly — no JavaScript measurement, no layout hacks, no guessing.
The logic
Set interpolate-size: allow-keywords on the element (or a parent — it inherits). Then declare height: 3rem as the collapsed state and height: auto on :hover or when a class is toggled. The transition: height 0.4s ease rule handles the rest. The browser calculates the auto height at paint time and interpolates between the two numeric values. Add overflow: hidden to clip content during the animation.
Accessibility & performance
Height transitions trigger layout — every frame recalculates box sizes of the element and its siblings. For a single panel this is negligible, but avoid animating height on dozens of elements simultaneously. Use contain: layout on the parent to limit the layout boundary. Always gate the animation behind prefers-reduced-motion and ensure the expanded content is reachable via keyboard focus.