Angular7在包装元素上的拖放效果不佳

Question

代码示例：

<div cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="drop($event)" class="drop-list mt-1">
  <span cdkDrag class="badge badge-dark" *ngFor="let item of items">item</span>
</div>

drop(event: CdkDragDrop<string[]>) {
  moveItemInArray(this.items, event.previousIndex, event.currentIndex);
  console.log(this.items);
}

.drop-list {
  overflow: hidden;
}

.cdk-drag-placeholder {
  opacity: 0;
}

.cdk-drag-preview {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
              0 8px 10px 1px rgba(0, 0, 0, 0.14),
              0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

在这种情况下，只要列表项（span元素）停留在一行中就可以按预期的方式进行拖放，但是当容器没有更多的水平空间并且这些列表项落在下一行（被包装）时，请尝试拖放给出了意外的结果以及列表项的视觉上不规则的移动。

我也使用flexbox换行功能测试了这种情况，但是我得到了相同的行为。

使用ng2-dragula实施相同的情况将给出正确且可接受的结果。