Hey everyone, I’ve stumbled across what seems to b...

# compose

[Gabriel Stefan]

Hey everyone, I’ve stumbled across what seems to be an undocumented behaviour of Modifier.weight inside a scrollable parent and I’d like to understand why it behaves the way it does.

Given a column with vertical scroll and a weighted child

Column(
  modifier = Modifier
      .fillMaxSize()
      .verticalScroll(rememberScrollState())
) {
  Box(
    Modifier
        .fillMaxWidth()
        .height(200.dp)
        .background(Color.Red)
  )
  Box(
    Modifier
        .weight(1f)
        .fillMaxWidth()
        .background(Color.Blue)
  )
  Box(
    Modifier
        .fillMaxWidth()
        .height(200.dp)
        .background(
            Brush.linearGradient(
                colors = listOf(Color(0xFF6366F1), Color(0xFFEC4899))
            )
        )
  )
}

Based on the documentation around weight and expectations based on a simple understanding of how the modifier and scrolling works, this shouldn’t be possible, right? However when executed it looks as shown: the blue section takes up the remaining space after the gradient and red boxes are measured. Even though the incoming max constraint for each child is Infinity because of the verticalScroll. 🧵

[Gabriel Stefan]

And when the static content takes up more space than the parent Column the weighted space is collapsed and everything scrolls as normal

Column(
  modifier = Modifier
      .fillMaxSize()
      .verticalScroll(rememberScrollState())
) {
  Box(
    Modifier
        .fillMaxWidth()
        .height(200.dp)
        .background(Color.Red)
  )
  Box(
    Modifier
        .weight(1f)
        .fillMaxWidth()
        .background(Color.Blue)
  )
  Box(
    Modifier
        .fillMaxWidth()
        .height(1000.dp)
        .background(
            Brush.linearGradient(
                colors = listOf(Color(0xFF6366F1), Color(0xFFEC4899))
            )
        )
  )
}

Screen Recording 2026-02-23 at 21.28.39.mov

[Gabriel Stefan]

This seems to be pretty useful if you want to have some content, like a button, always pushed to the bottom of the page while also allowing for scrolling when the content doesn’t fit the viewport.

[Gabriel Stefan]

But again, to me it seems completely counterintuitive based on the available docs so I’d appreciate it if anyone could help shed some light on the behaviour

Thanks

[Louis Pullen-Freilich [G]]

See a previous discussion:

https://kotlinlang.slack.com/archives/C04TPPEQKEJ/p1756734917157669?thread_ts=1756734295.024579&cid=C04TPPEQKEJ