Jetpack Compose: How to scroll a Column (and focus the correct item) when its child has the same height as the column?

Question

If one focusable item in a column has the same height as its parent. How to scroll the column and focus the right item by arrow key?

@Composable
fun FocusDemo() {
     Column(Modifier.size(100.dp)) {
        for (i in 0..3) {
            FocusBox(title = "Box-$i", modifier = Modifier.size(100.dp))
        }
    }
}

In the above example, if I set the size of the Column to 400.dp, then all Boxes can be focused correctly by arrow key. If I set the size of the Column to 100.dp,then how to scroll the Column to other Boxes and focus them correctly?

@Composable
fun FocusBox(
    title: String,
    modifier: Modifier = Modifier
) {
    var boxColor by remember { mutableStateOf(Color.White) }
    Box(
        modifier
            .onFocusChanged {
                boxColor = if (it.isFocused) Color.Green else Color.Gray
            }
            .focusable()
            .background(boxColor)
    ) {
        Text(
            text = title,
            color = Color.White
        )
    }
}