Flexbox & Grid

Flex Grow

Utilities for controlling how flex items grow.

Basic usage

Grow

Use grow to allow a flex item to grow to fill any available space:

<div className="flex ...">
  <div className="flex-none w-14 h-14 ...">
    01
  </div>
  <div className="**grow** h-14 ...">
    02
  </div>
  <div className="flex-none w-14 h-14 ...">
    03
  </div>
</div>

Don't grow

Use grow-0 to prevent a flex item from growing:

<div className="flex ...">
  <div className="grow h-14 ...">
    01
  </div>
  <div className="**grow-0** h-14 ...">
    02
  </div>
  <div className="grow h-14 ...">
    03
  </div>
</div>