Skip to main content

IntrinsicHeight

Overview​

Matches the heights of the child widgets laid out in the same Row, sizing them all to the intrinsic height of the tallest child. Cards placed side by side end up the same height automatically. Apply this style to the container that holds those children — usually a Row — not to the individual children.

Properties​

note

This style has no properties to set. Add it to a widget and it applies right away.

Example: seeing the effect​

Before IntrinsicHeight

After IntrinsicHeight

IntrinsicHeight is a style you add to the container (the Row). Instead of filling the leftover height the parent hands down, it shrinks the container to the content height of the tallest child. Build the example below and the effect becomes visible.

How to build it

  1. Prepare an area with plenty of vertical height — for example an outer Row or container 200 tall. This becomes the parent.
  2. Put a single target Row inside it, and set its cross-axis alignment (crossAxisAlignment) to stretch.
  3. Place three containers with background colors side by side inside the target Row, and set them up like this.
    • Card A: blue background
    • Card B: red background
    • Card C: yellow background, plus a SizedBox Height of 200
  4. Now toggle IntrinsicHeight on and off on the target Row and compare.

Results

  • IntrinsicHeight off: the target Row takes the parent's height (200) as is, so the A, B, and C backgrounds all stretch to 200 — taking far more space than their content needs.
  • IntrinsicHeight on: the target Row shrinks to the content height of the tallest child (C), so the A, B, and C backgrounds all match that height. The parent's leftover vertical space stays empty.

In short, IntrinsicHeight's core behavior is this: don't fill the leftover height the parent gives you — match the content height of the tallest child. Toggle it on and off and the difference is obvious.

tip

Three things have to be true for the effect to show.

(1) The parent gives a height larger than the children's content,
(2) the children have a background color, and
(3) the Row's crossAxisAlignment is set to stretch.

If the parent's height already fits the content exactly (no leftover height), or the children have no background, you'll see no change either way — and in that case IntrinsicHeight is effectively unnecessary.

note

IntrinsicHeight costs relatively more layout work, because it has to measure the intrinsic height of every child. Use it only to match siblings of differing heights, and avoid it where items are numerous, such as in a list.