in my layout I have a list with a box underneath.

• The list should grow in height when entries get added, when it cannot grow any more it gets scrollable.
• The box should fill the remaining space underneath the list. It is always visible, even when the list reaches its max height.

Right now I have implemented it like this:

    Column(
        modifier = Modifier
            .padding(10.dp)
            .background(Color.Gray)
    ) {
        LazyColumn(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f, false)
                .padding(10.dp)
                .background(Color.LightGray)
        ) {
            items(list) { item ->
                Text(
                    modifier = Modifier
                        .padding(vertical = 10.dp)
                        .background(Color.Yellow),
                    text = item,
                )
            }
        }

        Column (
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp)
                .background(Color.Red),
        ) {
            Text(text = "Bottom Box")

//            Spacer(modifier = Modifier.weight(1f))

            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(5.dp),
                onClick = { },
            ) {
                Text(text = "ClickMe")
            }
        }
    }

The first two pictures show the current state, the third picture shows how it should be.

As you can see, the box does not fill the remaining space to the bottom when the list is not at max height.

The problem is: when measuring the list, it has to know the minimum height of the box, and when measuring the box, it has to know the actual height of the list.

I have tried to put a Spacer with a .weight(1f) inside the box, but that results in the list disappearing while the box covers the full screen.

How to solve this? Thanks in advance!
Dominik