title: Can I stop the cdkDropList from expanding in Angular12
body: <p>I am using Angular 12 drag and drop to move a mat-list-item to  &quot;dropzone&quot;  (cdkDropList) in another component.</p>
  <p>When I drag the item over the droplist, the droplist expands as if to make room for the item.  Since this is not really a list, this behavior is undesirable.  How can I stop it from expanding?
  <a href="https://i.stack.imgur.com/EC95h.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EC95h.gif" alt="enter image description here" /></a></p>
  <pre><code>        &lt;mat-list-item
            cdkDrag
            [cdkDragDisabled]=&quot;!isDraggable&quot;
            [cdkDragData]=&quot;r.id&quot;
            (click)=&quot;selectRecord(r, i)&quot;
            *ngFor=&quot;
              let r of recordList | filterList: searchText:filterField;
              let i = index&quot;&gt;
            &lt;p id=&quot;{{ 'Item-' + r.id }}&quot; [innerHTML]=&quot;lineTitle(r)&quot;
               matLine&gt;&lt;/p&gt;
          &lt;/mat-list-item&gt;
  </code></pre>
  <pre><code>            &lt;div
                (cdkDropListDropped)=&quot;svc.dropSub1($event)&quot;
                *ngIf=&quot;!svc.sub1&quot;
                cdkDropList
                class=&quot;drag-here-column text-center&quot;
                style=&quot;border: 1px grey dotted; line-height: 300px; font-size: smaller; font-style: italic;&quot;&gt;
                Drag preferred subject here
              &lt;/div&gt;
  </code></pre>