Jetpack compose: how to force a dropdownmenu to be anchored underneath its parent?

Question

I'm currently using a dropdownmenu for selecting one of many options in my app. The problem is that the dropdownmenu expands above where it is originally anchored once it has many elements in it (see images attached). How can I force the drop down menu to stay anchored to the bottom of the button as in the first image? Thanks!

what i want (only works with few items in the list)

the problem (occurs when there is lots of items in the list)

Edit: here is the relevant code:

Box(modifier = Modifier.fillMaxWidth()) { // box for dropdown menu
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = { showCategories = true }
                ) {
                    Icon(Icons.Default.Favorite, null)
                    Text("${currentCategory.name}")
                    Icon(
                        painter = painterResource(id = R.drawable.ic_baseline_expand_more_24),
                        contentDescription = "expand more"
                    )
                }
                DropdownMenu(
                    expanded = showCategories,
                    onDismissRequest = {
                        showCategories = false
                    }
                ) {
                    categories.forEach {
                        DropdownMenuItem(
                            onClick = {
                                onCategoryChangeRequest(it)
                                showCategories = false
                            }
                        ) {
                            Text(it.name)
                        }
                    }
                }
            }

Answer 1

You can assign a max size for your DropdownMenu.

DropdownMenu(
    modifier = Modifier.requiredSizeIn(maxHeight = 200.dp),
    ...
)

It worked for me...