# compose

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}")
        }
    )
}

See the requiredSize modifier and friends

Yes, you can use the wrapContentSize modifier

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

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.

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

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

Yeah, that did the trick 👍.