How to Make One Flex Item Fill the Remaining Space

To make one flex item fill whatever space is left, give it flex-grow: 1 and leave the others at grow 0. That is the whole answer for the simple case. The rest of this guide is about the cases where it is not enough: the fixed item that quietly shrinks, and the filling item that refuses to. Every step below can be done in Flexbox playground with the CSS written as you go.

Build it in the playground

1. Pick the Sidebar preset. It sets two items: item 1 with a 200px basis, item 2 with grow 1. The preview is already the layout you want.
2. Look at the CSS. Only two item rules appear, flex-basis: 200px on the first child and flex-grow: 1 on the second, because everything else is still at its default.
3. Select item 1 and set Shrink to 0. A third line, flex-shrink: 0, joins its rule. The next section explains why you want it.
4. If the sidebar should be another width, keep item 1 selected and move the Basis slider in Pixels mode. It runs from 0 to 400 in steps of 10; for anything outside that, edit the number in the copied CSS.
5. Copy the CSS.

Why the fixed item needs shrink 0

A 200px basis is a request, not a rule. Items shrink by default (flex-shrink: 1), so when the row gets narrower than the two items' starting sizes, the browser takes width back from both, in proportion to their bases. Your sidebar can end up narrower than 200px on a small laptop without any warning. Setting its shrink to 0 takes it out of that sharing, and it stays 200px while the main column absorbs the squeeze.

If you would rather the sidebar give way first and the main column hold its ground, do the reverse: leave the sidebar at shrink 1 and give the main column a basis plus shrink 0. The playground lets you set shrink from 0 to 5 per item, which is enough to see how a higher number makes one item give up width faster than the rest.

Why the filling item needs min-width: 0

This one the playground cannot set for you, because it has no min-width control, so add it to the copied CSS by hand. A flex item will not shrink below its content by default. Put a long URL, a wide code block or a data table in the main column and it stops shrinking at that content's width, which pushes the whole row past the edge of the page. min-width: 0 on the main column removes that floor, so the content inside can wrap, truncate or scroll.

.layout {
  display: flex;
  gap: 16px;
}
.sidebar { flex: 0 0 200px; }
.main { flex-grow: 1; min-width: 0; }

flex: 0 0 200px is the same as the three separate properties on the sidebar: grow 0, shrink 0, basis 200px. Use whichever your codebase already prefers.

Fitting the copied CSS into your page

The playground names its container .layout and targets items by position, with .layout > :nth-child(1) and so on. That keeps the output honest about what it changed, but position selectors break as soon as someone adds an element above the sidebar. Before pasting, rename the container to your own class and replace each :nth-child rule with a class on the element it belongs to, as in the snippet above.

The same two-property pattern covers more than sidebars. A search input that fills a toolbar next to fixed buttons, a chat message field beside a Send button, a label and a value with the value pushed to the far end: in each one, one item gets grow 1, the fixed ones get shrink 0, and the growing one gets min-width: 0 if its content can be long.

For the reasoning behind grow, shrink and basis, see why flex items never end up the width you gave them. For a full header row that has to cope with wrapping, see this one. Or open the playground and pick Sidebar.