fix(drag-drop): preview matchSize sometimes incorrect inside flex container

src/cdk/drag-drop/directives/drag.spec.ts

@@ -3013,6 +3013,23 @@ describe('CdkDrag', () => {
         expect(preview.style.transform).toBe('translate3d(8px, 33px, 0px)');
       }));
 
+    it('should not have the size of the inserted preview affect the size applied via matchSize',
+      fakeAsync(() => {
+        const fixture = createComponent(DraggableInHorizontalFlexDropZoneWithMatchSizePreview);
+        fixture.detectChanges();
+        const item = fixture.componentInstance.dragItems.toArray()[1].element.nativeElement;
+        const itemRect = item.getBoundingClientRect();
+
+        startDraggingViaMouse(fixture, item);
+        fixture.detectChanges();
+
+        const preview = document.querySelector('.cdk-drag-preview')! as HTMLElement;
+        const previewRect = preview.getBoundingClientRect();
+
+        expect(Math.floor(previewRect.width)).toBe(Math.floor(itemRect.width));
+        expect(Math.floor(previewRect.height)).toBe(Math.floor(itemRect.height));
+      }));
+
     it('should not throw when custom preview only has text', fakeAsync(() => {
       const fixture = createComponent(DraggableInDropZoneWithCustomTextOnlyPreview);
       fixture.detectChanges();
@@ -5792,6 +5809,40 @@ class PlainStandaloneDropList {
   @ViewChild(CdkDropList) dropList: CdkDropList;
 }
 
+
+@Component({
+  styles: [`
+    .list {
+      display: flex;
+      width: 100px;
+      flex-direction: row;
+    }
+
+    .item {
+      display: flex;
+      flex-grow: 1;
+      flex-basis: 0;
+      min-height: 50px;
+    }
+  `],
+  template: `
+    <div class="list" cdkDropList cdkDropListOrientation="horizontal">
+      <div *ngFor="let item of items" class="item" cdkDrag>
+        {{item}}
+
+        <ng-template cdkDragPreview [matchSize]="true">
+          <div class="item">{{item}}</div>
+        </ng-template>
+      </div>
+    </div>
+  `
+})
+class DraggableInHorizontalFlexDropZoneWithMatchSizePreview {
+  @ViewChildren(CdkDrag) dragItems: QueryList<CdkDrag>;
+  items = ['Zero', 'One', 'Two'];
+}
+
+
 /**
  * Drags an element to a position on the page using the mouse.
  * @param fixture Fixture on which to run change detection.

src/cdk/drag-drop/drag-ref.ts

@@ -887,23 +887,25 @@ export class DragRef<T = any> {
     const previewTemplate = previewConfig ? previewConfig.template : null;
     let preview: HTMLElement;
 
-    if (previewTemplate) {
-      const viewRef = previewConfig!.viewContainer.createEmbeddedView(previewTemplate,
-                                                                      previewConfig!.context);
+    if (previewTemplate && previewConfig) {
+      // Measure the element before we've inserted the preview
+      // since the insertion could throw off the measurement.
+      const rootRect = previewConfig.matchSize ? this._rootElement.getBoundingClientRect() : null;
+      const viewRef = previewConfig.viewContainer.createEmbeddedView(previewTemplate,
+                                                                     previewConfig.context);
       viewRef.detectChanges();
       preview = getRootNode(viewRef, this._document);
       this._previewRef = viewRef;
-
-      if (previewConfig!.matchSize) {
-        matchElementSize(preview, this._rootElement);
+      if (previewConfig.matchSize) {
+        matchElementSize(preview, rootRect!);
       } else {
         preview.style.transform =
             getTransform(this._pickupPositionOnPage.x, this._pickupPositionOnPage.y);
       }
     } else {
       const element = this._rootElement;
       preview = deepCloneNode(element);
-      matchElementSize(preview, element);
+      matchElementSize(preview, element.getBoundingClientRect());
     }
 
     extendStyles(preview.style, {
@@ -1332,11 +1334,9 @@ function getRootNode(viewRef: EmbeddedViewRef<any>, _document: Document): HTMLEl
 /**
  * Matches the target element's size to the source's size.
  * @param target Element that needs to be resized.
- * @param source Element whose size needs to be matched.
+ * @param sourceRect Dimensions of the source element.
  */
-function matchElementSize(target: HTMLElement, source: HTMLElement): void {
-  const sourceRect = source.getBoundingClientRect();
-
+function matchElementSize(target: HTMLElement, sourceRect: ClientRect): void {
   target.style.width = `${sourceRect.width}px`;
   target.style.height = `${sourceRect.height}px`;
   target.style.transform = getTransform(sourceRect.left, sourceRect.top);