The size modifiers are ignored inside a Surface

Question

I am new to Compose. I use the following code:

Card(
    modifier = Modifier
        .width(100.dp)
        .height(100.dp),
    shape = RoundedCornerShape(15.dp),
    backgroundColor = Color.Gray
)

But for some unknown reason Card takes up the whole screen and changes its size only if you use required modifiers. fillMaxWidth(0.2f) doesn't work either. Help, please.

Only requiredHeight and requiredWidth work. The rest of the menus are fine

Answer 1

You are using as parent container of the Card a Surface. It is a Box with propagateMinConstraints = true parameter which forces first descendant to have same minimum constraints or dimensions.

In the doc:

If propagateMinConstraints is set to true, the min size set on the Box will also be applied to the content, whereas otherwise the min size will only apply to the Box.

Use a Column to wrap the Card.

 Surface(
    modifier = Modifier.fillMaxSize(),
 ){
    Column(){

        Card(
            modifier = Modifier
                .width(100.dp)
                .height(100.dp),
            shape = RoundedCornerShape(15.dp),
            backgroundColor = Color.Gray
        ) {}
    }
}