Why when animating using animateContentSize(), the content bounces off the edge of the container

Question

Below is a simplified version of the bar from the diagram that I am implementing. While scrolling the chart, I change its scale and would like to animate it, but during the animation, the edge of the column moves away from the edge of the chart. How can I avoid this?

demo

@Composable
fun AnimationTest() {
    var toggle by remember { mutableStateOf(true) }
    Row(
        modifier = Modifier
            .padding(8.dp)
            .animateContentSize()
            .clickable { toggle = !toggle },
    ) {
        Spacer(modifier = Modifier.weight(if (toggle) 0.4f else 0.6f))
        Card(
            modifier = Modifier
                .animateContentSize()
                .weight(if (toggle) 0.6f else 0.4f)
        ) {
            Row {
                Box(
                    modifier = Modifier
                        .weight(if (toggle) 0.2f else 0.1f)
                        .background(Color.Magenta)
                        .height(56.dp)
                )
                Box(
                    modifier = Modifier
                        .weight(if (toggle) 0.4f else 0.3f)
                        .background(Color.Blue)
                        .height(56.dp)
                )
            }
        }
    }
}

I tried to use Animated Content, but I don't quite understand what to specify as transitionSpec. I guess the problem is that the Card to which I apply the animateContentSize() also changes its size, but not by changing the size of children, but by changing its own weight.