CSS Quickie: Fit/Min/Max Content

Managing the size of content blocks is important. How well an application does this can be an overwhelming factor in how accessible and usable users find it. So obviously it’s important to treat it with care and precision. Easier said than done today!

With all the different viewport sizes and fluidity in how applications are viewed, engineers need to build in ways that easily adapt to that. To help, I’d like to introduce fit-content, min-content, and max-content. These are CSS property values for width that set the element to respond to the width of the content inside it. Let’s look at the code!

.FitElement {
  width: fit-content; 
  /* Sets element to grow with content, but not overflow */
}

.MinElement {
  width: mint-content; 
  /* Sets element to grow with longest word, wraps everything else */
}

.MaxElement {
  width: max-content; 
  /* Sets element to grow as content requires it */
}