Fill height for child in Row

Question

I try to achieve this layout but don't really know how:

currently it looks like this:

using this Code:

@Preview(widthDp = 150)
@Composable
fun Item() {
    Card(shape = RoundedCornerShape(8.dp)) {
        Row {
            Box(Modifier.background(Color.Yellow).weight(1f)) {
                SomeMoreContentWithUnknownHeight()
            }
            Box(Modifier.width(20.dp).height(IntrinsicSize.Max).background(Color.Green))
        }
    }
}

I tried to set the height of the second Box to IntrinsicSize.Max but that didn't change anything. I am currently running Jetpack Compose in Version 1.0.0-beta07

Answer 1

You have to apply Modifier.height(IntrinsicSize.Min) to your Row and .fillMaxHeight() to the 2nd Box.

Something like:

Card(shape = RoundedCornerShape(8.dp)) {
    Row(Modifier.height(IntrinsicSize.Min)) {
        Box(Modifier
            .background(Color.Yellow)
            .weight(1f)
            ) {
               //Box(Modifier.height(50.dp))
        }
        Box(Modifier.width(20.dp)
            .fillMaxHeight()
            .background(Color.Green)
            ){
            //........
        }
    }
}