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)?

HTML:

<div class="scrollable-container">
  <div class="flex" *ngFor="let item of items" cdkDrag cdkDragLockAxis="x">
    <div>{{ item }}</div>
  </div>
</div>

CSS:

.scrollable-container {
  max-height: 400px; /* Set the max height of the container */
  overflow-y: auto;  /* Enable vertical scrolling */
}

app.component.ts

import { CdkDrag } from '@angular/cdk/drag-drop';
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, CommonModule, CdkDrag],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
})
export class AppComponent {
  items = Array.from({ length: 100 }).map((_, i) => `Item #${i}`);
}