Make Flexbox Children Fill Parent Height with CSS

You will learn how Flexbox distributes space, why height: 100% can be unreliable when a parent has an automatic computed height, and how to make a nested child fill its flex item by turning that item into a flex container. You will also see when align-items: stretch, flex: 1, and absolute positioning are appropriate.

A flex container has two axes:

• The main axis follows flex-direction. With flex-direction: row, it runs horizontally.
• The cross axis is perpendicular to it. In a row layout, it runs vertically.

In the example, .container is 200 pixels tall and lays out .flex-1 and .flex-2 in a row. Flex items stretch across the cross axis by default because the default is:

align-items: stretch;

Therefore, .flex-2 is visually stretched to the container's height.

However, a percentage height such as height: 100% needs a parent with a definite height during percentage-size calculation. A flex item that gets its visual height from cross-axis stretching can have an automatic computed height in situations where a normal block child cannot reliably resolve its percentage height. This is why relying on a nested height: 100% has historically produced confusing or inconsistent results.

The most robust solution is to make .flex-2 a flex container too. Then its child can use Flexbox's own space-distribution rules rather than depend on percentage-height resolution:

.flex-2 {
  flex: 1;
  display: flex;
}

.flex-2-child {
  flex: 1;
}

This pattern is common in nested layouts: each region that must arrange and fill its own children becomes a flex container.

Think of .container as a shelf that is exactly 200 pixels high. Its two direct children are boxes on the shelf. Because Flexbox stretches them by default, both boxes reach from the shelf's bottom to its top.

But .flex-2-child is an object inside one of those boxes. Saying height: 100% is like asking it to match a height that may not have been written on the box's label. The box is visibly tall because the shelf stretched it, but percentage sizing may need an explicitly resolvable height.

Turning .flex-2 into a flex container changes the instruction: instead of asking the child to calculate a percentage, tell the parent, “give this child all remaining space.” That is what flex: 1 does.

Use nested Flexbox when a child should fill the available space of a flex item.

.container {
  display: flex;
  height: 200px;
}

.flex-1 {
  width: 100px;
  background: blue;
}

.flex-2 {
  flex: 1;
  display: flex;
  background: red;
}

.flex-2-child {
  flex: 1;
  background: green;
}

<div class="container">
  <div class="flex-1"></div>
  <div class="flex-2">
    <div class="flex-2-child"></div>
  </div>
</div>

.flex-2 grows to use the remaining horizontal space because of flex: 1. It is also a flex container. Since its default direction is row, .flex-2-child stretches vertically on the cross axis and flex: 1 lets it take available main-axis space too. With only one child, it fills the entire green area.

For a vertical inner layout, explicitly use a column:

.flex-2 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.flex-2-child {
  flex: 1;
}

This version is especially useful when .flex-2 contains a header, a scrollable content area, and a footer.

Consider this nested flex layout:

.container {
  display: flex;
  height: 200px;
}

.sidebar {
  width: 100px;
}

.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
}

<div class="container">
  <aside class="sidebar">Menu</aside>
  <main class="panel">
    <section class="content">Content</section>
  </main>
</div>

1. .container becomes a flex container with a horizontal main axis.
2. Its fixed height is 200px.
3. .sidebar takes 100px of horizontal space.
4. .panel has flex: 1, so it receives the remaining horizontal space.
5. The container's default align-items: stretch makes .panel fill the 200-pixel cross-axis height.
6. .panel is itself a flex container with a vertical main axis because of flex-direction: column.
7. .content has flex: 1, so it grows to occupy all available vertical space inside .panel.

No percentage height is needed for .content. Flex layout assigns the space directly.

• Application shell: A sidebar sits next to a main panel, and the main panel must fill the viewport height.
• Dashboard cards: A card has a title section and a chart area that should consume the remaining card height.
• Chat interface: A header and message composer have natural heights, while the messages area fills the middle.
• Admin tables: A page panel contains filters and a data table; the table should use all remaining vertical space.
• Split editor: A navigation pane and code editor share a row, with the editor's internal content filling its panel.

For example, a typical full-height page area might be:

.page {
  min-height: 100vh;
  display: flex;
}

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.main-content {
  flex: 1;
  overflow: auto;
}

Here, .main-content fills the available height and becomes scrollable when its content is too large.

Developers commonly use nested flex containers for components that need to fill an allocated region.

Fill remaining space after fixed sections

.panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.panel__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

A header and footer can keep their natural size, while .panel__body receives the remaining space.

Use min-height: 0 for scrollable flex children

Flex items often have a default minimum size based on their content. If a flex child should shrink and scroll, add:

.scroll-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

Without min-height: 0, long content can force the area beyond its intended height instead of allowing a scrollbar.

Use align-items intentionally

The default stretch is useful for equal-height columns. If a parent has this instead:

.container {
  align-items: flex-start;
}

its children do not stretch vertically. Restore stretching for a specific item with:

.panel {
  align-self: stretch;
}

or remove the overriding align-items rule.

Assuming height: 100% always means available height

.child {
  height: 100%;
}

This only works predictably when the parent's height can be resolved for percentage calculations. Prefer flex: 1 when the parent is already arranging children with Flexbox.

Forgetting to make the intermediate parent a flex container

This does not make the child a flex item:

.panel {
  flex: 1;
}

.panel-child {
  flex: 1;
}

flex: 1 on .panel-child has no effect because its parent is not display: flex or display: inline-flex.

Fix it:

.panel {
  flex: 1;
  display: flex;
}

.panel-child {
  flex: 1;
}

Disabling stretch accidentally

.container {
  display: flex;
  align-items: center;
}

In a row layout, align-items: center prevents children from stretching vertically. Use stretch if equal height is desired:

.container {
  align-items: stretch;
}

Using absolute positioning for normal layout

.child {
  position: absolute;
  inset: 0;
}

This can fill a positioned parent, but the child is removed from normal document flow. It is useful for overlays, backgrounds, and layered UI, not usually for ordinary content layout.

Missing min-height: 0 in nested scrolling layouts

If a flex child with overflow: auto refuses to shrink, add min-height: 0 to that child. This is particularly important in column-based application layouts.

flex: 1 is shorthand for flexible growth with a zero basis in common layouts. In practice, it means: “take the available free space.”

Use height: 100% for a genuine percentage relationship. Use nested Flexbox when the desired behavior is “fill whatever space Flexbox assigned to this region.”

/* A row with equal-height direct flex items */
.row {
  display: flex;
  align-items: stretch; /* default */
}

/* A flex item whose own child fills its space */
.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.panel__content {
  flex: 1;
}

/* A fill-and-scroll region */
.panel__content {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

• flex-direction: row means height is the cross-axis dimension.
• Direct flex items stretch vertically by default in a row container.
• flex: 1 only works when the element is a direct child of a flex container.
• Use display: flex on an intermediate parent before using flex: 1 on its children.
• height: 100% depends on a parent height that the browser can resolve.
• Use min-height: 0 when a vertically flexible child must scroll or shrink.

Why does height: 100% not fill my flex item?

A percentage height depends on a resolvable parent height. Although a flex item may appear stretched, its height can be automatic during percentage-size calculation. Use nested Flexbox and flex: 1 for fill-available-space behavior.

Does a flex item have height: 100% by default?

No. In a row flex container, direct items default to align-self: stretch, which stretches their used cross-axis size. That is different from explicitly setting height: 100%.

How do I make a child fill a parent without absolute positioning?

Make the parent a flex container and give the child flex: 1:

.parent { display: flex; }
.child { flex: 1; }

Is width: 100% necessary for a flex child?

Usually not when the child uses flex: 1, especially if it is the only child. Flexbox can allocate the available main-axis space itself.

Why is my flex child not stretching vertically?

Check whether the parent uses align-items: center, flex-start, or flex-end. Those values disable the default stretch behavior. Use align-items: stretch or align-self: stretch.

When should I use min-height: 0 in Flexbox?

Use it on a flex child that must shrink below its content size, especially a child with overflow: auto in a vertical flex layout.

Can I use height: 100% if the parent has height: 200px?

Yes, it is generally appropriate when the immediate parent has that definite height. In nested flex layouts, however, flex: 1 is often clearer and more resilient when filling allocated space.

• Flexbox main axis and cross axis — Explains whether Flexbox distributes width or height.
• align-items and align-self — Controls cross-axis stretching and alignment of flex items.
• flex-grow, flex-shrink, and flex-basis — The individual properties behind flex: 1.
• Percentage heights in CSS — Explains why height: 100% needs a resolvable parent height.
• CSS overflow — Needed when a fill-height region contains more content than fits.
• CSS min-height — Important for allowing nested flex children to shrink and scroll.
• CSS Grid — An alternative layout system for two-dimensional rows and columns.