CSS Dimensions (Width & Height)

Control the size of elements with width, height, and their minimum/maximum constraints. Use absolute units (px), relative units (%, em, rem), or viewport units (vw/vh).

1) Width & Height Basics


.box {
  width: 200px;
  height: 120px;
}
200×120
width: 50% (of parent)

2) Min/Max Constraints


.card {
  min-width: 220px;
  max-width: 480px;
  min-height: 120px;
  max-height: 240px;
}

Min/Max ensure elements don’t shrink or grow beyond limits—great for responsive blocks.

3) Viewport Units (vw, vh, vmin, vmax)


.hero {
  height: 50vh;  /* 50% of viewport height */
}
20vh tall (resizes with viewport)

4) Intrinsic Sizing: min-content, max-content, fit-content()


.intrinsic  { width: max-content; } /* as wide as content needs */
.truncate   { width: min-content; } /* narrow as possible */
.fit        { width: fit-content(280px); } /* up to a limit */
max-content → very looooooooooong text line
min-content → Supercalifragilisticexpialidocious
fit-content(220px) → wraps at max width

5) Box-Sizing Recap


/* content-box (default): padding/border add to final size */
.content-box {
  box-sizing: content-box;
  width: 200px;
  padding: 16px;
}

/* border-box: declared width includes padding/border */
.border-box {
  box-sizing: border-box;
  width: 200px;
  padding: 16px;
}
content-box → grows beyond 200px
border-box → stays 200px

Tip: many projects use * { box-sizing: border-box; } globally.

6) Responsive Media


img  { max-width: 100%; height: auto; }
video{ max-width: 100%; height: auto; }
Sample responsive image Resizes to container width; keeps aspect ratio.

7) Aspect Ratio & Object Fit


.thumb {
  width: 240px;
  aspect-ratio: 16 / 9; /* keeps 16:9 box */
  object-fit: cover;     /* for replaced elements (img/video) */
}
16:9 box
Thumb

8) Height + Overflow


.scroll {
  max-height: 120px;
  overflow: auto;
}

Overflow content will scroll within this box. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, id mollitia. Dolores perspiciatis illum facere, dicta autem aliquid labore. Asperiores ad expedita repellendus pariatur cumque a culpa recusandae sapiente velit?

Quick Notes:

  • width/height accept absolute (px) and relative units (%, vw/vh).
  • Use min-*/max-* to keep components usable across screen sizes.
  • border-box simplifies sizing with padding/border.
  • Make images responsive with max-width:100%; height:auto;.
  • aspect-ratio is great for consistent media/placeholders.