address comments

Author: mmalerba

src/cdk-experimental/scrolling/virtual-scroll-viewport.scss

@@ -1,3 +1,32 @@
+// When elements such as `<tr>` or `<li>` are repeated inside the cdk-virtual-scroll-viewport,
+// their container element (e.g. `<table>`, `<ul>`, etc.) needs to be placed in the viewport as
+// well. We reset some properties here to prevent these container elements from introducing
+// additional space that would throw off the the scrolling calculations.
+@mixin _cdk-virtual-scroll-clear-container-space($direction) {
+  $start: if($direction == horizontal, 'left', 'top');
+  $end: if($direction == horizontal, 'right', 'bottom');
+
+  & > dl:not([cdkVirtualFor]),
+  & > ol:not([cdkVirtualFor]),
+  & > table:not([cdkVirtualFor]),
+  & > ul:not([cdkVirtualFor]) {
+    padding: {
+      #{$start}: 0;
+      #{$end}: 0
+    };
+    margin: {
+      #{$start}: 0;
+      #{$end}: 0
+    };
+    border: {
+      #{$start}-width: 0;
+      #{$end}-width: 0
+    };
+    outline: none;
+  }
+}
+
+
 // Scrolling container.
 cdk-virtual-scroll-viewport {
   display: block;
@@ -16,48 +45,12 @@ cdk-virtual-scroll-viewport {
 
 .cdk-virtual-scroll-orientation-horizontal .cdk-virtual-scroll-content-wrapper {
   bottom: 0;
-
-  & > dl,
-  & > ol,
-  & > table,
-  & > ul {
-    padding: {
-      left: 0;
-      right: 0
-    };
-    margin: {
-      left: 0;
-      right: 0
-    };
-    border: {
-      left-width: 0;
-      right-width: 0
-    };
-    outline: none;
-  }
+  @include _cdk-virtual-scroll-clear-container-space(horizontal);
 }
 
 .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
   right: 0;
-
-  & > dl,
-  & > ol,
-  & > table,
-  & > ul {
-    padding: {
-      top: 0;
-      bottom: 0
-    };
-    margin: {
-      top: 0;
-      bottom: 0
-    };
-    border: {
-      top-width: 0;
-      bottom-width: 0
-    };
-    outline: none;
-  }
+  @include _cdk-virtual-scroll-clear-container-space(vertical);
 }
 
 // Spacer element that whose width or height will be adjusted to match the size of the entire data

src/cdk-experimental/scrolling/virtual-scroll-viewport.ts

@@ -68,8 +68,8 @@ export class CdkVirtualScrollViewport implements OnInit, OnDestroy {
   _totalContentSize = 0;
 
   /**
-   * The the rendered content transform, used to move the rendered portion of the content to the
-   * correct place in the viewport.
+   * The CSS transform applied to the rendered subset of items so that they appear within the bounds
+   * of the visible viewport.
    */
   private _renderedContentTransform: string;
 

src/cdk-experimental/scrolling/virtual-scroll.md

@@ -147,7 +147,7 @@ content.
 Some HTML elements such as `<tr>` and `<li>` have limitations on the kinds of parent elements they
 can be placed inside. To enable virtual scrolling over these type of elements, place the elements in
 their proper parent, and then wrap the whole thing in a `cdk-virtual-scroll-viewport`. Be careful
-that the parent does not introduce additional space (e.g. via `margin` or `padding`) as it may
+that the parent does not introduce additional space (e.g. via `margin` or `padding`) as it will
 interfere with the scrolling.
 
 ```html