I want to create a `Column` with two items: - The ...

# compose

[jannis]

I want to create a Column with two items:
- The first item has a fixed aspect ratio of (e.g. 3:4) and should grow as big as it can until it occupies the full width.
- The second item has a minimum height (e.g. 128dp), but should grow if more space is available

I can solve either of these problems with specifying a weight, but not both:
- Setting a weight for the first item will not let the second item grow if more space is available
- Setting a weight for the second item will let the first item occupy too much space and the second item is not visible anymore

[Francesc]

I'm not super clear on your requirements, but I would suggest you look at using a Layout for this

[jannis]

I tried as well. But I didn't get the second item to stretch to the remaining space

[Oleksandr Balan]

I am also not sure about requirements, did you plan to limit column height, or should it be stretched by items height?

column.mp4

[Oleksandr Balan]

Hmm, maybe this is what are you trying to achieve? 🤔
See weight(1f, fill = false) & matchHeightConstraintsFirst = true on the first item

Box(
    contentAlignment = Alignment.TopCenter
) {
    var limitHeight by remember { mutableStateOf(false) }
    var columnHeight by remember { mutableStateOf(400f) }
    var textLength by remember { mutableStateOf(11f) }

    val height = if (limitHeight) {
        Modifier.height(columnHeight.dp)
    } else {
        Modifier
    }

    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(32.dp)
            .border(4.dp, Color.Black)
            .then(height)
    ) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f, fill = false)
                .aspectRatio(4f / 3f, matchHeightConstraintsFirst = true)
                .background(Color.Cyan)
        )
        Text(
            text = Lorem.take(textLength.roundToInt()),
            modifier = Modifier
                .fillMaxWidth()
                .heightIn(min = 128.dp)
                .padding(16.dp)
        )
    }

    Column(
        verticalArrangement = Arrangement.spacedBy(8.dp),
        modifier = Modifier
            .padding(16.dp)
            .align(Alignment.BottomCenter)
    ) {
        Text(text = "Column height")
        Checkbox(checked = limitHeight, onCheckedChange = { limitHeight = it })
        Slider(
            value = columnHeight,
            onValueChange = { columnHeight = it },
            valueRange = 200f..1000f,
            enabled = limitHeight
        )

        Text(text = "Text length")
        Slider(
            value = textLength,
            onValueChange = { textLength = it },
            valueRange = 11f..500f,
        )
    }
}

val Lorem = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent vitae arcu tempor neque lacinia pretium. Mauris elementum mauris vitae tortor. Nulla quis diam. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent in mauris eu tortor porttitor accumsan. Aenean fermentum risus id tortor. Curabitur vitae diam non enim vestibulum interdum. Mauris tincidunt sem sed arcu. Ut tempus purus at lorem. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Integer malesuada. Morbi scelerisque luctus velit. Curabitur bibendum justo non orci. Mauris elementum mauris vitae tortor. Nam quis nulla. Vivamus ac leo pretium faucibus. Nulla est."

column.mp4

[jannis]

I'm sorry that my description was a bit confusing.
The bottom item should grow when space is available (not when it's content grows), but should have a minimum height (128dp)
The Top Item should grow as long as the 4:3 aspect ratio is met. So when the screen is 360dp width the first item should grow to a maximum of 480dp. When the screen is small the second item height of 100dp should be respected and the first item shrinks (centered) but keep the 4:3 aspect ratio