Width, Height & Overflow

Width & Height

width / height — Set explicit size
min-width / max-width — Constrain responsive size
min-height / max-height — Constrain vertical size

Overflow

When content exceeds its container, overflow controls what happens:

Value	Behaviour
`visible`	Default — content spills out
`hidden`	Clips the overflowing content
`scroll`	Always shows scrollbars
`auto`	Scrollbar only when needed (best)

Example

.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}

.card {
  min-height: 200px;
  max-height: 400px;
  overflow: auto;       /* scrollable when content overflows */
}

.truncate {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;  /* shows "..." when text overflows */
}

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned