why cdkDragBoundary is not proper working?

Question

I have selector component and I'm want to set this as draggable, But I also want to set some limit for dragging so I used cdkDragBoundary, but the problem is it is not working, it is not identifying its boundary.

chat-notification.html

<div class="chat-notification" [style.left.px]="styleLeft">
<div class="chat-title example-handle">
    <div fxLayout="column">
        <div fxFlex="100">
            <mat-icon class="mt-8 mr-8" fxFlex="15" fxLayoutAlign="center center">forum</mat-icon>
        </div>
    </div>
</div>

chat-notification.component.scss

.chat-notification {
    position: fixed;
    width: 200px;
    height: 47px;
    bottom: 20px;
    left: 20px;
    z-index: 9;
    background: $color-white;

    .chat-title {
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.50);
        padding-left: 24px;
        padding-top: 10px;
        padding-bottom: 10px;
        background: $color-white;
    }
}

default-layout.component.html

<div fxFlex fxLayout="column" class="main-content" id="main-content">
<router-outlet></router-outlet>
<ng-container *ngFor="let issue of this.allChatIssues;let i=index">
    <div class="issue-chats" cdkDrag #draggable="cdkDrag" cdkDragBoundary=".main-content"> <app-chat-notification (click)="openChatModal(issue)" ngIf="issue.isMinimize" [issue]="issue" [styleLeft]="i>0?(i220+20):20"></app-chat-notification> </div>
</ng-container>

here .main-content is actually whole visible screen so I haven't set any height/width for .main-content.

but here div app-chat-notification is not able to identify the boundary so it is dragging outside .main-content.