min/max — Complete Guide

min/max — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of CSS Tutorial on Toolliyo Academy.

8 min read Updated 8/22/2026

On this page

CSS Tutorial · Lesson 44 of 100

min/max

Foundations & Layout ✓ → Responsive & Motion → Architecture & Perf → Projects

Responsive & Motion · 2 — Adapt · ~13 min read · CSS — Modern CSS3 Features

1. Introduction

Today: min/max. Read the diagram, paste the CSS, then change one value and watch the UI update.

min() picks the smallest of comma-separated values; max() picks the largest. minmax() in grid defines flexible track bounds. Often combined for responsive sizing.

2. Real-world story

OTP modal fits small phones yet stays narrow on ultrawide monitors.

Outcome: min(90vw, 480px) replaces two media query width rules.

3. Why it matters

StyleVerse modals and images use min(90vw, 480px) to stay readable on phones and capped on desktop.

4. Visual understanding

Read this diagram — the mental model for min/max.

:root { --color-brand: #2874f0; }
component uses var(--color-brand)
calc() / clamp() for fluid sizes
modern extras: aspect-ratio, object-fit, backdrop-filter

5. Key concepts (easy words)

Idea	Meaning
What	min() picks the smallest of comma-separated values; max() picks the largest. minmax() in grid defines flexible track bounds. Often combined for responsive sizin
Remember	min() and max() choose among values. minmax() powers responsive grids. Pair with vw/vh for viewport-aware caps.
Practice tip	Change one property, refresh, watch DevTools Computed.

6. How it works

Dialog never wider than 480px or 90vw. Grid columns at least 280px unless container narrower than 100%.
min() and max() choose among values.
minmax() powers responsive grids.
Check the result in DevTools → Computed and the box model overlay.

7. Choose wisely

Option	Notes
Do	Practice min/max on a small StyleVerse card
Avoid	Copying huge frameworks before learning core CSS

8. Try this example

Paste into a <style> block (or use Run Example). Refresh to see StyleVerse UI changes.

.dialog {
  width: min(90vw, 480px);
  max-height: min(80vh, 600px);
  overflow-y: auto;
}
.grid-auto {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

Line walkthrough

Code	What it means
`.dialog {`	Selector — picks which elements get these declarations.
`width: min(90vw, 480px);`	Declaration — property and value that change appearance.
`max-height: min(80vh, 600px);`	Declaration — property and value that change appearance.
`overflow-y: auto;`	Declaration — property and value that change appearance.
`}`	Ends the rule block.
`.grid-auto {`	Selector — picks which elements get these declarations.
`grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));`	Declaration — property and value that change appearance.
`}`	Ends the rule block.

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code

Result

9. Another real-world angle

10. Best practices checklist

Prefer classes over ids for reusable StyleVerse components.
Use design tokens (CSS variables) for color and spacing.
Mobile-first media queries; test keyboard focus.
Keep specificity low — avoid !important except rare overrides.
Animate transform/opacity when you can; respect prefers-reduced-motion.

11. Common mistakes

min(100%, 280px) when parent has no defined width.
Forgetting max-height with overflow on tall modals.

12. Practice in the browser

Open dialog on phone — 90vw width applies.
On desktop — caps at 480px centered.
Test grid with narrow 250px container.
Compare min() vs max-width alone.

Experiments

Set font-size: max(1rem, 2.5vw) for floor on small text.
Use max(240px, 20%) for sidebar min width.

13. FAQ

Where should I put CSS for min/max?

Start in a <style> block or styles.css linked from HTML. Later use CSS Modules, Tailwind, or tokens in a design system.

Why is my rule not applying?

Check selector match, typos, specificity, and whether a more specific rule or inline style wins. DevTools Computed tells the truth.

Flexbox or Grid for this?

Flex for one direction (toolbars, card rows). Grid for two-dimensional page frames. Many UIs use both.

14. Interview questions

Explain min/max simply.

min() picks the smallest of comma-separated values; max() picks the largest. minmax() in grid defines flexible track bounds. Often combined for responsive sizing.