Upfront: Sry if this it the 101. time asking that ...

# compose

[TheMrCodes]

Upfront: Sry if this it the 101. time asking that question but I didn't find one for my use case.

How can i fit the height of the Box around the "X"-Text to the height of its Parent (the Row with the gray background)
The Problem is that fillHeight would fill the whole screen not just the Parent

Code im Thread

[TheMrCodes]

MaterialTheme {
    Column(Modifier.fillMaxSize()) {
        Box(Modifier.weight(1f).fillMaxWidth()) {
            Text("Test")
        }
        Row(Modifier.wrapContentHeight().fillMaxWidth().background(Color.Gray)) {
            Box(
                modifier = Modifier/** .fillParentHeight() **/.background(Color.Red)
            ) {
                Text("X")
            }
            Text("Title", modifier = Modifier.padding(16.dp))
        }
    }
}

[Lukas Sztefek]

Can you draw what are you want to achieve? Not sure from the description.

[TheMrCodes]

First picture are the resultes with fitMaxHeight().
Second the desired output

[Jeisson Sáchica]

If your Row wraps its content's height, and the Box should match the Row's height, then you must explicitly define the height of the Text, otherwise there is no way to know what the height of everything should be

[Dominaezzz]

ConstraintLayout or Modifier.layout should help here. I can't tell you how to use them sadly.

[Lukas Sztefek]

You could do this:

MaterialTheme {
    Column(Modifier.width(200.dp).height(200.dp)) {
        Box(Modifier.weight(1f).fillMaxWidth()) {
            Text("Test")
        }
        Box(
            modifier = Modifier
                .wrapContentHeight()
                .fillMaxWidth()
                .background(Color.Gray)
        ) {
            Text(
                "Title",
                modifier = Modifier
                    .padding(16.dp)
            )
            Box(
                modifier = Modifier
                    .matchParentSize()
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxHeight()
                        .background(Color.Red)
                ) {
                    Text("X")
                }
            }
        }
    }
}

[Lukas Sztefek]

[Lukas Sztefek]

It is important to define “Title” component before “X” component due to correct parent size matching.