For the following HTML and CSS Snipped, using Angular CdkDrag, is there a way keep the .scrollable-container vertical scrollable, although the inner elements are draggable (and locked on the X Axis)?

I thought this would be pretty simple, but I have not actually had much luck finding a solution to this. I’m pretty new to Angular Drag and Drop. What I’m trying to do is automatically force the insert position of the item being dragged at the end of the container (items are visually stacked on top of each other with a max of 2 elements). Right now, sometimes it inserts it before the existing element, other times, after.

I thought this would be pretty simple, but I have not actually had much luck finding a solution to this. I’m pretty new to Angular Drag and Drop. What I’m trying to do is automatically force the insert position of the item being dragged at the end of the container (items are visually stacked on top of each other with a max of 2 elements). Right now, sometimes it inserts it before the existing element, other times, after.

I am trying to build a drag and drop functionality which drags some formControls inside formArray. On dropping the item it fires the event with correct information but noticing on the UI, the items don’t drop to the correct position (currentIndex). As shown in this video recording- video .