# How can I make a row take all remaining height?

**URL:** <https://discuss.kotlinlang.org/t/how-can-i-make-a-row-take-all-remaining-height/31065>\
**Category:** Support\
**Created:** [May 19, 2026, 3:19pm UTC](https://discuss.kotlinlang.org/t/how-can-i-make-a-row-take-all-remaining-height/31065 "2026-05-19T15:19:20Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JoeAntB](https://avatars.discourse-cdn.com/v4/letter/j/b3f665/32.png) [@JoeAntB](https://discuss.kotlinlang.org/u/JoeAntB)\
**Post date:** [May 19, 2026, 3:19pm UTC](https://discuss.kotlinlang.org/t/how-can-i-make-a-row-take-all-remaining-height/31065/1 "2026-05-19T15:19:20Z")

</div>

I am creating a game by using the Unscramble sample as a starting point. The app will be a single full screen with no scrolling. The screen will show an AppBar, a status bar, a canvas and a grid of buttons. Three rows have determined size. I want the canvas to occupy all of the remining height but have yet to find how to do that.

```auto
Column(modifier = Modifier
  .statusBarsPadding()
  .verticalScroll(enabled = false, state = rememberScrollState())
  .safeDrawingPadding()
  .padding(mediumPadding)
  .heightIn(max = screenHeight),
  verticalArrangement = Arrangement.SpaceBetween,
  horizontalAlignment = Alignment.CenterHorizontally
) {
    MomentumAppBar(
      modifier = Modifier,
      gameViewModel = gameViewModel,
      title = { Text(“MSR”) })

    Row(
	  modifier = Modifier
		.background(Color.LightGray)
		.fillMaxWidth()
    ) {
	  // contains read-only Text fields
    }

    Row(
	  modifier = Modifier
		.fillMaxWidth()
		.height(400.dp)
    ) {
	    Canvas(
		modifier = Modifier
			.background(Color.Cyan)
			.fillMaxSize()
	) {
		// display only
	}

    // 3 x 3 grid controls movement of game tokens
    DirectionGridLayout(
	  resetScroll = {
		scope.launch {
			scrollState.scrollToItem(0)
		}
 	  },
 	    modifier = Modifier
		  .navigationBarsPadding()
		  .imePadding(),
	    gameViewModel = gameViewModel
    )

}

```

---

<div class="post-metadata">

**Author:** ![monoseb](https://avatars.discourse-cdn.com/v4/letter/m/919ad9/32.png) [@monoseb](https://discuss.kotlinlang.org/u/monoseb)\
**Post date:** [May 20, 2026, 12:46am UTC](https://discuss.kotlinlang.org/t/how-can-i-make-a-row-take-all-remaining-height/31065/2 "2026-05-20T00:46:47Z")

</div>

Use `modifier.weight(1)`. If only 1 element has weight, it takes all the remaining space. If several elements have, they take space in proportion to their weight.

---

<div class="post-metadata">

**Author:** ![JoeAntB](https://avatars.discourse-cdn.com/v4/letter/j/b3f665/32.png) [@JoeAntB](https://discuss.kotlinlang.org/u/JoeAntB)\
**Post date:** [May 20, 2026, 5:03pm UTC](https://discuss.kotlinlang.org/t/how-can-i-make-a-row-take-all-remaining-height/31065/3 "2026-05-20T17:03:04Z")

</div>

Thanks. It’s not perfect yet but it helps.