Jetpack Compose Box filled the whole screen

Question

I am newbie in learning Android Jetpack Compose. And I am currently creating a Box, set the modifier height and width to be 100 dp, but when I put the Box outside of the Column, it fills the whole layout instead of being kept at the size of 100 x 100dp.

Here is the code:

@Composable
fun MainContent() {
    Box(modifier = Modifier
        .width(100.dp)
        .height(100.dp)
        .background(Color.Blue))
    Column {
        Box(modifier = Modifier
            .width(100.dp)
            .height(100.dp)
            .background(Color.Red))
        Box(modifier = Modifier
            .width(100.dp)
            .height(100.dp)
            .background(Color.Green))
    }
}

Answer 1

If the parent of your Composable is a Surface, it will try to fill the entire space with the first Composable it finds. So your code might look like this:

Surface(
    modifier = Modifier.fillMaxSize()
) {
    MainContent()
}

To remove this behavior, you need to wrap you Composable in a Box:

Surface(
    modifier = Modifier.fillMaxSize()
) {
    Box {
        MainContent()
    }
}

Before:

After: