bug(cdkDrag): Can't reorder edge items with different size and boundary

### 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

I'm implementing draggable horizontal list, each item may has different width (depending on content). In case if first item is shorter than second and I want swop them and I capture second item closer to right edge it's impossible to set second item as first.
Note: cdkDrag constrained by X axis and has boundary
`cdkDragLockAxis="x" [cdkDragBoundary]="dropContainer"`

### Reproduction

StackBlitz link: https://stackblitz.com/edit/roitsa?file=src%2Fexample%2Fcdk-drag-drop-horizontal-sorting-example.ts
Steps to reproduce:
1. Capture "Bronze age" closer to right side (red area in the example)
2. Try to make it first in the list (swop with "Iron")

I was trying to make workaround with `cdkDragConstrainPosition` but without success as with this function behaviour changes, item reorders immediately if I drag left. Seems weird or I do something wrong
Example with `cdkDragConstrainPosition` : https://stackblitz.com/edit/roitsa-6kbo4x?file=src%2Fexample%2Fcdk-drag-drop-horizontal-sorting-example.html

### Expected Behavior

Ability to reorder edge items constrained by cdkDragBoundary

### Actual Behavior

Can't reorder edge items

### Environment

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

Bắt đầu với các bản tái hiện StackBlitz được liên kết, đặc biệt là cdk-drag-drop-horizontal-sorting-example.ts và HTML của nó, đồng thời tái hiện trường hợp danh sách ngang với cdkDragLockAxis="x" và cdkDragBoundary. Theo dõi cách thao tác kéo bị giới hạn bởi boundary ảnh hưởng đến việc sắp xếp khi các item ở hai đầu có độ rộng khác nhau; hoàn tất khi item Bronze age có thể được sắp xếp lại nằm trước Iron từ cả hai vị trí bắt đầu kéo.

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