If I do ```Box(Modifier.height(100.dp)) { Box( ...

# compose

[Stylianos Gakis]

If I do

Box(Modifier.height(100.dp)) {
  Box(
    Modifier.fillMaxWidth()
      .layout { measurable: Measurable, constraints ->
        val requiredHeight = 200.dp.roundToPx()
        val placeable = measurable.measure(constraints.copy(minHeight = requiredHeight, maxHeight = requiredHeight))
        layout(placeable.width, placeable.height) {
          placeable.place(0, 0)
        }
      }
      .debugBorder(Color.Blue),
  )
}

I’d expect the inside box to render with its top left corner at (0, 0) in the parent’s size, therefore only overflowing below it. But currently, it overflows equally below and above it, meaning that (0, 0) somehow is outside of the actual parent size. Shouldn’t 0,0 just be at the top left of my parent, even though I am measuring my current placeable after adjusting the constraints which are bigger than the parent?

[Stylianos Gakis]

Is there a way to do what I am going for in a more obvious way? I want the box to be say 100.dp, and the inside content be 200.dp, yet have it be bottom aligned, and overflow only above the outer box, not below at all. Couldn’t get it working

[Stylianos Gakis]

I’ve also tried doing smth like

Box(height(100) {
  Box(requiredHeight(200).align(BottomCenter)
}

but alas that did not achieve my goal either. When getting a bigger size than the parent it alwasy seems to center itself out. So I fell like I must be missing smth

[Stylianos Gakis]

I hope this helps

[Stylianos Gakis]

I did this

.layout { measurable: Measurable, constraints ->
  val requiredHeight = 200.dp.roundToPx()
  // 0, 0 is a bit above since the layout is centered, so this is how much higher y is.
  val actualZeroYPositionOfParent = (requiredHeight - constraints.maxHeight) / 2
  val placeable = measurable.measure(
    constraints.copy(minHeight = requiredHeight, maxHeight = requiredHeight),
  )
  // How much bigger this composable with the requiredHeight is compared to the parent.
  val overflowingHeight = placeable.height - constraints.maxHeight
  layout(placeable.width, placeable.height) {
    placeable.place(0, actualZeroYPositionOfParent - overflowingHeight)
  }
}

And this works, but I can’t help but think that there should be a more normal way to do this.

[mgrazianodecastro]

I wish I knew how to help

[Albert Chang]

If the layout size is bigger than incoming constraints, it will be centered in the parent.
You need to use

layout(placeable.width, constraints.maxHeight) {
    placeable.place(0, constraints.maxHeight - placeable.height)
}

[Albert Chang]

Or you can just use

Modifier
    .fillMaxWidth()
    .wrapContentHeight(align = Alignment.Bottom, bounded = false)
    .height(200.dp)

[Stylianos Gakis]

Thank you so much, as always you’re super helpful Albert.
I now understand why it centers as it does, I was misunderstanding what defines what in the layout modifier.
And yes, this wrap solution is exactly what I really wanted, without going all the way to the layout modifier even. I was certain there must be a simple way to get this, but I think I never think of using the wrapContentX modifier, kinda tricky to think of that for this situation just by its name, before you know how it works internally with the bounded = false parameter.