Basing my styling knowledge on CSS I seem to misun...

# compose

[Vladimir]

Basing my styling knowledge on CSS I seem to misunderstand the function of parents in JetPack compose. It seems like there's no way for a parent to horizontally center all its children and restrict their width to its own width? What is the role of the parent, then?

For instance, I have the following:

@Composable
fun Spinner(itemList: List<String>,
            selectedItem: String,
            onItemSelected: (selectedItem: String) -> Unit
) {
    var expanded by rememberSaveable() {
        mutableStateOf(false)
    }
    Box(contentAlignment = Alignment.Center, modifier = Modifier.fillMaxWidth()) {
        OutlinedButton(
            onClick = { expanded = true },
            shape = RectangleShape,
            modifier = Modifier.fillMaxWidth(0.8f)
        ) {
            Text(
                text = selectedItem,
                overflow = TextOverflow.Ellipsis,
                maxLines = 1,
                modifier = Modifier.weight(
                    1f
                )
            )

            Icon(Icons.Default.ArrowDropDown, contentDescription = null)
        }

        DropdownMenu(
            expanded = expanded,
            onDismissRequest = { expanded = false },
            modifier = Modifier.fillMaxWidth(0.8f)
        ) {
            itemList.forEach {
                DropdownMenuItem(onClick = {
                    expanded = false
                    onItemSelected(it)
                }, text = { Text(text = it) })
            }
        }
    }

}

While the OutlinedButton respects the contentAlignment = Alignment.Center rule provided by the parent Box element, the DropdownMenu does not, even though it is also inside the aforementioned parent? What am I doing wrong?

Also, it appears it is necessary for child elements to provide their own maximum widths, they cannot automatically extend to the maximum width of the parent element?