Set height of child elements equal to highest other element that are contained by Row

Question

is it possible to force a Row to redraw its children to have a height of largest child, when height of children is not fixed?

Row {
    Box {

    }

    Box {
        // second child has larger height, recompose first child to match height of the second child? 
    }
}

I end up with something like:

I think it is because Row measures each child individually but I would like first child to be recomposed to match the height of the second one, once second one is added into Row. Is this possible?

Answer 1

You can add Modifier.fillMaxHeight to all child views and limit their height to the largest of them by adding Modifier.height(IntrinsicSize.Max) to the parent view:

Row(
    Modifier
        .padding(10.dp)
        .height(IntrinsicSize.Max)
) {
    Text(
        "First",
        fontSize = 20.sp,
        modifier = Modifier
            .fillMaxHeight()
            .background(Color.Gray)
    )
    Text(
        "Second",
        fontSize = 30.sp,
        modifier = Modifier
            .fillMaxHeight()
            .background(Color.LightGray)
    )
}

Result: