Angular drag and drop cdk is not scrolling container when dragging

[fatmaE19]

I am developping a frontend app in which i am using angular 7.I am using angular cdk for dragging and dropping elements but the problem is when i make a drag the div container is not scrolling.So is there any sollution for that.

https://angular-2cdcbb.stackblitz.io

this is my html

box

this is my css

.col_container {
height: 300px;
width: 10%;
margin: 0 auto;
padding: 10px;
background-color: yellow;
overflow-x: auto;
overflow-y: auto;
border-style: solid;
border-width: 0.1px;
border-color: black;
}
.column {

color: blue;
background-color: azure;
border-style: solid;
border-width: 0.1px;
border-color: black;
display: inline-block;
width: 30px;
margin: 0 6px;
vertical-align:top;

}
this is my component

@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'scrollTestForDragAndDrop';
}
the expected behaviour is when i drag the box to the border the yellow div must scroll

[crisbeto]

@fatmaE19 there are two issues with your example:

1. The col_container isn't scrolling because it isn't scrollable (e.g. you can see that it doesn't have a scrollbar).
2. You haven't set the col_container as a drop container. To do so you have to add the cdkDropList attribute to it.

[fatmaE19]

1- it is scrollable col_container
overflow-x: auto;
overflow-y: auto;
2-even if i add cdkDropList it doesen't scroll

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}