diff --git a/packages/compass-aggregations/src/components/input-preview/input-preview.jsx b/packages/compass-aggregations/src/components/input-preview/input-preview.jsx
index 087239770bc..d2f7764a7aa 100644
--- a/packages/compass-aggregations/src/components/input-preview/input-preview.jsx
+++ b/packages/compass-aggregations/src/components/input-preview/input-preview.jsx
@@ -24,8 +24,10 @@ class InputPreview extends Component {
   render() {
     const documents = (this.props.documents || []).map((doc, i) => {
       return (
-        <div key={i} className={styles['input-preview-document-card']}>
-          <Document doc={doc} editable={false}  />
+        <div key={i} className={styles['input-preview-document-card-container']}>
+          <div className={styles['input-preview-document-card']}>
+            <Document doc={doc} editable={false} />
+          </div>
         </div>
       );
     });
diff --git a/packages/compass-aggregations/src/components/input-preview/input-preview.module.less b/packages/compass-aggregations/src/components/input-preview/input-preview.module.less
index 7890f50e29b..2ef629b7e72 100644
--- a/packages/compass-aggregations/src/components/input-preview/input-preview.module.less
+++ b/packages/compass-aggregations/src/components/input-preview/input-preview.module.less
@@ -12,26 +12,37 @@
     display: flex;
     align-items: flex-start;
     overflow-x: scroll;
-    margin: 10px;
-    padding: 10px;
+    margin: 8px;
+    padding: 8px;
   }
 
-  &-document-card {
+  &-document-card-container {
     flex: none;
     border: 1px solid @gray6;
     border-radius: 4px;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
     width: 350px;
-    height: 150px;
     overflow: scroll;
+    min-height: 150px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
   }
 
-  &-document-card:not(:first-child) {
-    margin-left: 20px;
+  &-document-card-container:not(:first-child) {
+    margin-left: 16px;
   }
 
-  &-document-card::-webkit-scrollbar {
-    display: none;
+  &-document-card {
+    flex-basis: 150px;
+    flex-grow: 1;
+    flex-shrink: 0;
+    overflow: auto;
+    padding: 0;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 }
 
diff --git a/packages/compass-aggregations/src/components/stage-preview/stage-preview.jsx b/packages/compass-aggregations/src/components/stage-preview/stage-preview.jsx
index abda00062b3..4c871d73b1b 100644
--- a/packages/compass-aggregations/src/components/stage-preview/stage-preview.jsx
+++ b/packages/compass-aggregations/src/components/stage-preview/stage-preview.jsx
@@ -209,8 +209,10 @@ class StagePreview extends Component {
       if (this.props.documents.length > 0) {
         const documents = this.props.documents.map((doc, i) => {
           return (
-            <div key={i} className={styles['stage-preview-document-card']}>
-              <Document doc={doc} editable={false} />
+            <div key={i} className={styles['stage-preview-document-card-container']}>
+              <div className={styles['stage-preview-document-card']}>
+                <Document doc={doc} editable={false} />
+              </div>
             </div>
           );
         });
diff --git a/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less b/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less
index 385739e2ead..be43b0fb682 100644
--- a/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less
+++ b/packages/compass-aggregations/src/components/stage-preview/stage-preview.module.less
@@ -66,26 +66,37 @@
     display: flex;
     align-items: stretch;
     overflow-x: scroll;
-    margin: 10px;
-    padding: 10px;
+    margin: 8px;
+    padding: 8px;
   }
 
-  &-document-card {
+  &-document-card-container {
     flex: none;
     border: 1px solid @gray6;
     border-radius: 4px;
     box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
     width: 350px;
-    height: 150px;
     overflow: scroll;
+    min-height: 150px;
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
   }
 
-  &-document-card:not(:first-child) {
-    margin-left: 20px;
+  &-document-card-container:not(:first-child) {
+    margin-left: 16px;
   }
 
-  &-document-card::-webkit-scrollbar {
-    display: none;
+  &-document-card {
+    flex-basis: 150px;
+    flex-grow: 1;
+    flex-shrink: 0;
+    overflow: auto;
+    padding: 0;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 }