Growmode Vertical

Intent

Validate that growMode: vertical makes a child expand to consume all remaining vertical space in a fixed-height parent Column.

What is being tested

• A Column with a known height (400px) contains a fixed-height header, a "grow" Card with growMode: vertical, and a fixed-height footer
• The grow Card should fill the space between header and footer

Acceptance criteria

✓ No errors ✓ Header at top, footer at bottom, grow card fills the middle ✓ Grow card visually spans from below the header to above the footer ✓ No unused empty space between the three sections

Example

Open in playground →

Screen {
  width: 700
  height: 600
  padding: 24

  Column {
    width: 100%
    height: 400
    gap: 8

    Card {
      title: "Header (fixed 48px)"
      width: 100%
      height: 48
    }

    Card {
      title: "Grows to fill remaining space"
      width: 100%
      growMode: vertical
      Text { text: "This card expands to fill the gap between header and footer"  variant: body }
    }

    Card {
      title: "Footer (fixed 48px)"
      width: 100%
      height: 48
    }
  }
}

Preview