How to wrap content height of a `Column` that has various Composables, one of them being another `Co...

# compose

[Pablo]

How to wrap content height of a Column that has various Composables, one of them being another Column? I have a Card with a Column with 3 items, a title, a body (Column with n texts and scroll) and a bottom text. The idea is if the card has more height than the screen, then, the user will have the possibility to scroll the body (body has a scroll). The problem is that if the body has a lot of content (filling the entire screen height), the bottom text of the card is not displayed. Sample in the thread:

[Pablo]

Card(modifier = modifier.widthIn(max = 400.dp).fillMaxWidth().padding(16.dp)) {
    Box(modifier = Modifier.fillMaxWidth(), 
        contentAlignment = Alignment.Center
    ) {
        Column(modifier = Modifier.padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text(text = "1")
            Text(text = "2")
            val scrollState = rememberScrollState()
            Column(modifier = Modifier.verticalScroll(scrollState)) {
                repeat(30){ Text(text = "1234567890") } // long body
                //repeat(3){ Text(text = "1234567890") } // short body
            }
            Text(text = "3")
        }
    }
}

[Pablo]

I tryed using wrapContentHeight on the parent column (same result), also tryed using weight(1f) in the child column (then the bottom text is visible always but the card is always stretched to full screen height), etc... can't get the desired behaviour.

[Zach Klippenstein (he/him) [MOD]]

try weight(1f, fill = false)

[Pablo]

it worked zach, thank you very much 🙂

[Zach Klippenstein (he/him) [MOD]]

There's no reason to use a Box in your layout anyway since it only has one child (the Column), and any modifier you're applying to the box you could just put on the column

[Pablo]

thx I'm revising it