bug(CdkDragDrop): reordering smaller against larger items produce flickering effect

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

When using CdkDragDrop for reordering items with different sizes (e.g. width for horizontal orientation) in a container with greater height then of the elements there is a flickering effects. CdkDragDrop moves larger item really quickly from one side to another.

Try to drag "Iron age" over empty space in container against some wider item (e.g. "Early modern period")

Example uses angular 12, but in angular 17 it works the same.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/angular-fhqz1h?file=src%2Fapp%2Fcdk-drag-drop-horizontal-sorting-example.css,src%2Fapp%2Fcdk-drag-drop-horizontal-sorting-example.ts,src%2Fapp%2Fcdk-drag-drop-horizontal-sorting-example.html

### Expected Behavior

Reorder elements without flickering effects, as it is when reordering elements of the same size or when container is not larger (e.g. greater height for horizontal list).

### Actual Behavior

Larger element in the list that is reordered against moves fast from one side to another.

### Environment

- Angular: 12
- CDK/Material: 12
- Browser(s): any
- Operating System (e.g. Windows, macOS, Ubuntu): any

Bắt đầu bằng cách chạy bản tái hiện StackBlitz được liên kết và kiểm tra src/app/cdk-drag-drop-horizontal-sorting-example.css, .ts và .html. Tái hiện việc kéo “Iron age” qua khoảng trống đối diện với “Early modern period”, sau đó theo dõi hành vi sắp xếp theo chiều ngang của CdkDragDrop. Hoàn thành khi các mục có kích thước khác nhau được sắp xếp lại mà không bị nhấp nháy, phù hợp với hành vi của các mục cùng kích thước và các container ngắn hơn.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.