Is it possible in Jetpack compose to allow a child composable to be bigger than it’s parent, just no...

# compose

[Per Jansson]

Is it possible in Jetpack compose to allow a child composable to be bigger than it’s parent, just not show the overflowing part and still let the parent composable decide how much is shown?

In this example, would it be possible for the inner blue box to actually render as 400dp but that the outer yellow box would not display the overflowing 200dp?
Like in the web world with CSS you can use overflow: hidden | clip to achieve the same.

In the example below both boxes will log that they are 200 in size, I would like the blue one to be 400 but only the top 200 would be visible.

Box(
  modifier = Modifier
    .size(200.dp)
    .background(Color.Yellow)
    .onGloballyPositioned { coordinates ->
       Log.d("BoxSize", "OUTER Width: ${coordinates.size.width}, Height: ${coordinates.size.height}")
    }
) {
    Box(
      modifier = Modifier
        .fillMaxWidth()
        .height(400.dp)
        .background(Color.Blue)
        .onGloballyPositioned { coordinates ->
           Log.d("BoxSize", "INNER Width: ${coordinates.size.width}, Height: ${coordinates.size.height}")
        }
    )
}

[Zach Klippenstein (he/him) [MOD]]

See the requiredSize modifier and friends

[vide]

Yes, you can use the wrapContentSize modifier

[romainguy]

And you can also enable clipping on the parent using .graphicsLayer { clip = true }

[Zach Klippenstein (he/him) [MOD]]

In general, a layout node can always measure itself to not satisfy the incoming constraints. When that happens, the layout system will report the constrained bounds to the parent, and center the naughty child. wrapContentSize lets you effectively change that default center behavior.

[vide]

In this case you could use .wrapContentHeight(unbounded = true).height(400.dp) on the inner composable

[vide]

And choose the alignment with .wrapContentHeight(unbounded = true, align = ...)

[Per Jansson]

Yeah, that did the trick 👍.