How can I make one flex item take leftover space?

Make the text area the only item with a positive grow factor. For example:

.row {
  display: flex;
  gap: 0.75rem;
}

.label,
.button {
  flex-grow: 0;
}

.text-area {
  flex-grow: 1;
}

When the row has positive free space, the text area gets it because it is the only item set to grow. The label and button do not grow. [S1] This does not by itself promise that they can never shrink: flex-grow controls growth, not all sizing behavior. Check the layout at narrow widths too.

Leftover space means positive free space along the flex container’s main axis. In a row, the main axis is horizontal, so the growing item gets extra width. With flex-direction: column, the main axis is vertical, so growth applies to height instead. [S1]

For example, imagine a row with 600 pixels of available inner width. If the label and button together use 160 pixels, and gaps and other sizing leave positive space, the text area can occupy that remaining room. Those numbers are only an illustration: actual space depends on the items, container, gaps, and sizing constraints. [S1]

For neighbors that should not grow beyond their natural starting size, use flex-grow: 0; leave their basis at its usual default or specify a basis. If the sidebar should start at a specified size, set that basis explicitly. A compact pattern is:

.main {
  flex: 1 1 0;
}

.sidebar {
  flex: 0 0 12rem;
}

Here, the main item can grow into available space, while the sidebar has a 12rem basis and does not grow. The flex shorthand sets grow, shrink, and basis together, so this example also sets shrink behavior explicitly. [S1] A basis is a starting size, not a guarantee that every layout constraint will be ignored.

First confirm that the container is actually a flex container and that the intended item has a positive grow factor. Then check whether positive space exists on the main axis: if the items already use all available room, there is nothing extra to distribute. Growth can also be limited by sizing constraints. [S1] If multiple items have positive grow factors, free space is shared in proportion to those factors rather than going entirely to one item. [S1]

Reusable row pattern:

.row {
  display: flex;
  gap: 0.75rem;
}

.fixed-side {
  flex: 0 0 auto;
}

.fill-space {
  flex: 1 1 0;
}

Use fixed-side for items that should not grow and fill-space for the one meant to expand. If a neighboring item needs a specific starting size, replace auto with a basis such as 12rem. Test the row at the actual widths you support; this pattern identifies which item grows, but it does not establish that every combination of content will fit.