Why set min-height: 0 on flex items (column layouts)

• The default min-size of flex items is auto, which equals content-size.
• In a column flex container, a child with min-height: auto cannot shrink below its content height.
• Result: the child pushes the container larger than the viewport, stealing/duplicating scroll and causing headers/NavBars to be pushed off-screen.

Symptom

• Page overflows; inner scroll area doesn’t scroll.
• NavBar/title seems to “disappear” because the content expands beyond the viewport.

Fix

• Allow the flex child to shrink by setting min-height: 0 (and give the actual scroller overflow).

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* or parent-sized */
}

.header {
  /* NavBar area */
}

.content {
  flex: 1;
  min-height: 0;     /* key: allow shrinking */
  overflow: auto;    /* the real scroller */
}

When to use

• Any vertical (column) flex layout where an inner area should scroll.
• Common in app shells with a fixed header and a scrollable body.

Alternatives and notes

• Setting overflow on the parent can also constrain size, but min-height: 0 on the flex child is the clearest, cross-browser fix.
• Sibling in row layouts uses min-width: 0 for similar reasons.