diff --git a/src/core/client/stream/components/Comment/Comment.css b/src/core/client/stream/components/Comment/Comment.css
index c4bf8c532..5c0f67095 100644
--- a/src/core/client/stream/components/Comment/Comment.css
+++ b/src/core/client/stream/components/Comment/Comment.css
@@ -1,3 +1,6 @@
+.root {
+  width: 100%;
+}
 .footer {
   margin-top: var(--spacing-unit);
 }
diff --git a/src/core/client/stream/components/Comment/Comment.tsx b/src/core/client/stream/components/Comment/Comment.tsx
index 932cd7155..b47c8ac02 100644
--- a/src/core/client/stream/components/Comment/Comment.tsx
+++ b/src/core/client/stream/components/Comment/Comment.tsx
@@ -20,7 +20,7 @@ export interface CommentProps {
 
 const Comment: StatelessComponent<CommentProps> = props => {
   return (
-    <div role="article">
+    <div role="article" className={styles.root}>
       <TopBar>
         {props.author &&
           props.author.username && <Username>{props.author.username}</Username>}
diff --git a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
index c86fc9284..d9a3e46f0 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/Comment.spec.tsx.snap
@@ -2,6 +2,7 @@
 
 exports[`renders username and body 1`] = `
 <div
+  className="Comment-root"
   role="article"
 >
   <TopBar>
diff --git a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
index 6c5348d0b..2e6694137 100644
--- a/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
+++ b/src/core/client/stream/components/Comment/__snapshots__/TopBar.spec.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly on big screens 1`] = `
-<div>
+<div
+  className="Flex-root TopBar-root"
+>
   <div
-    className="Flex-root TopBar-root Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
+    className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignBaseline Flex-directionRow"
   >
     <div>
       Hello World
@@ -13,9 +15,11 @@ exports[`renders correctly on big screens 1`] = `
 `;
 
 exports[`renders correctly on small screens 1`] = `
-<div>
+<div
+  className="Flex-root TopBar-root"
+>
   <div
-    className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+    className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
   >
     <div>
       Hello World
diff --git a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
index 8f0c81faa..d3310dc45 100644
--- a/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
@@ -1,17 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`loads more comments 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -69,23 +75,30 @@ exports[`loads more comments 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -112,16 +125,21 @@ exports[`loads more comments 1`] = `
                 </div>
               </div>
             </div>
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -148,16 +166,21 @@ exports[`loads more comments 1`] = `
                 </div>
               </div>
             </div>
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -193,17 +216,23 @@ exports[`loads more comments 1`] = `
 `;
 
 exports[`renders comment stream 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -261,23 +290,30 @@ exports[`renders comment stream 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -304,16 +340,21 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
             </div>
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
diff --git a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
index 5fc313abb..38f7f0b8f 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkView.spec.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
     <div
       className="PermalinkView-root"
@@ -23,16 +25,21 @@ exports[`renders permalink view 1`] = `
       >
         Show all Comments
       </a>
-      <div>
+      <div
+        className="Flex-root"
+      >
         <div
-          className="Flex-root Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+          className="Flex-flex Flex-wrap Flex-alignFlexStart Flex-directionColumn"
         >
           <div
+            className="Comment-root"
             role="article"
           >
-            <div>
+            <div
+              className="Flex-root TopBar-root"
+            >
               <div
-                className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
               >
                 <span
                   className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -65,17 +72,23 @@ exports[`renders permalink view 1`] = `
 `;
 
 exports[`show all comments 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -133,23 +146,30 @@ exports[`show all comments 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
index 63933cb3e..949a40e0c 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewAssetNotFound.spec.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view with unknown asset 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
     <div
       className="PermalinkView-root"
diff --git a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
index e8281b21e..20124a5e6 100644
--- a/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/permalinkViewCommentNotFound.spec.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders permalink view with unknown comment 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
     <div
       className="PermalinkView-root"
@@ -34,17 +36,23 @@ exports[`renders permalink view with unknown comment 1`] = `
 `;
 
 exports[`show all comments 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -102,23 +110,30 @@ exports[`show all comments 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
diff --git a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
index 0a78273db..009bbce70 100644
--- a/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
@@ -1,17 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders comment stream 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -69,23 +75,30 @@ exports[`renders comment stream 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -112,16 +125,21 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
             </div>
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -149,18 +167,23 @@ exports[`renders comment stream 1`] = `
                 <div
                   className="Indent-root Indent-level0"
                 >
-                  <div>
+                  <div
+                    className="Flex-root"
+                    id="talk-comments-replyList-log--comment-with-replies"
+                    role="log"
+                  >
                     <div
-                      className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                      id="talk-comments-replyList-log--comment-with-replies"
-                      role="log"
+                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
                     >
                       <div
+                        className="Comment-root"
                         role="article"
                       >
-                        <div>
+                        <div
+                          className="Flex-root TopBar-root"
+                        >
                           <div
-                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                           >
                             <span
                               className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -186,11 +209,14 @@ exports[`renders comment stream 1`] = `
                         />
                       </div>
                       <div
+                        className="Comment-root"
                         role="article"
                       >
-                        <div>
+                        <div
+                          className="Flex-root TopBar-root"
+                        >
                           <div
-                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                           >
                             <span
                               className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
diff --git a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
index b998f71f8..f46ff9b5e 100644
--- a/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
@@ -1,17 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders comment stream 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -69,23 +75,30 @@ exports[`renders comment stream 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -112,16 +125,21 @@ exports[`renders comment stream 1`] = `
                 </div>
               </div>
             </div>
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
diff --git a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
index 1fc9b2338..d010daaf3 100644
--- a/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+++ b/src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
@@ -1,17 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders comment stream 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -69,23 +75,30 @@ exports[`renders comment stream 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -113,18 +126,23 @@ exports[`renders comment stream 1`] = `
                 <div
                   className="Indent-root Indent-level0"
                 >
-                  <div>
+                  <div
+                    className="Flex-root"
+                    id="talk-comments-replyList-log--comment-0"
+                    role="log"
+                  >
                     <div
-                      className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                      id="talk-comments-replyList-log--comment-0"
-                      role="log"
+                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
                     >
                       <div
+                        className="Comment-root"
                         role="article"
                       >
-                        <div>
+                        <div
+                          className="Flex-root TopBar-root"
+                        >
                           <div
-                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                           >
                             <span
                               className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -178,17 +196,23 @@ exports[`renders comment stream 1`] = `
 `;
 
 exports[`show all replies 1`] = `
-<div>
+<div
+  className="Flex-root App-root"
+>
   <div
-    className="Flex-root App-root Flex-wrap Flex-justifyCenter Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter"
   >
-    <div>
+    <div
+      className="Flex-root Stream-root"
+    >
       <div
-        className="Flex-root Stream-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+        className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
       >
-        <div>
+        <div
+          className="Flex-root"
+        >
           <div
-            className="Flex-root Flex-wrap Flex-alignCenter"
+            className="Flex-flex Flex-wrap Flex-alignCenter"
           >
             <button
               className="BaseButton-root Button-root Button-sizeSmall Button-colorPrimary Button-variantRegular"
@@ -246,23 +270,30 @@ exports[`show all replies 1`] = `
             </button>
           </div>
         </form>
-        <div>
+        <div
+          aria-live="polite"
+          className="Flex-root"
+          id="talk-comments-stream-log"
+          role="log"
+        >
           <div
-            aria-live="polite"
-            className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-            id="talk-comments-stream-log"
-            role="log"
+            className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
           >
-            <div>
+            <div
+              className="Flex-root"
+            >
               <div
-                className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
+                className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
               >
                 <div
+                  className="Comment-root"
                   role="article"
                 >
-                  <div>
+                  <div
+                    className="Flex-root TopBar-root"
+                  >
                     <div
-                      className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                      className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                     >
                       <span
                         className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -290,18 +321,23 @@ exports[`show all replies 1`] = `
                 <div
                   className="Indent-root Indent-level0"
                 >
-                  <div>
+                  <div
+                    className="Flex-root"
+                    id="talk-comments-replyList-log--comment-0"
+                    role="log"
+                  >
                     <div
-                      className="Flex-root Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
-                      id="talk-comments-replyList-log--comment-0"
-                      role="log"
+                      className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignFlexStart Flex-directionColumn"
                     >
                       <div
+                        className="Comment-root"
                         role="article"
                       >
-                        <div>
+                        <div
+                          className="Flex-root TopBar-root"
+                        >
                           <div
-                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                           >
                             <span
                               className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
@@ -327,11 +363,14 @@ exports[`show all replies 1`] = `
                         />
                       </div>
                       <div
+                        className="Comment-root"
                         role="article"
                       >
-                        <div>
+                        <div
+                          className="Flex-root TopBar-root"
+                        >
                           <div
-                            className="Flex-root TopBar-root Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
+                            className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignBaseline Flex-directionColumn"
                           >
                             <span
                               className="Typography-root Typography-heading3 Typography-colorTextPrimary Username-root"
diff --git a/src/core/client/ui/components/Flex/Flex.css b/src/core/client/ui/components/Flex/Flex.css
index 378b4e9ba..2e6914c7f 100644
--- a/src/core/client/ui/components/Flex/Flex.css
+++ b/src/core/client/ui/components/Flex/Flex.css
@@ -1,5 +1,10 @@
 .root {
+  width: 100%;
+}
+
+.flex {
   display: flex;
+  width: 100%;
 }
 
 .halfItemGutter {
@@ -26,6 +31,30 @@
   }
 }
 
+.doubleItemGutter {
+  & > * {
+    margin: 0 calc(2 * var(--spacing-unit)) 0 0 !important;
+  }
+  &.directionRowReverse {
+    & > * {
+      margin: 0 0 0 calc(2 * var(--spacing-unit)) !important;
+    }
+  }
+  &.directionColumn {
+    & > * {
+      margin: 0 0 calc(2 * var(--spacing-unit)) 0 !important;
+    }
+  }
+  &.directionColumnReverese {
+    & > * {
+      margin: calc(2 * var(--spacing-unit)) 0 0 0 !important;
+    }
+  }
+  & > *:last-child {
+    margin: 0 !important;
+  }
+}
+
 .itemGutter {
   & > * {
     margin: 0 var(--spacing-unit) 0 0 !important;
@@ -93,6 +122,23 @@
       margin-left: calc(0.5 * var(--spacing-unit)) !important;
     }
   }
+
+  &:not(.directionColumn).doubleItemGutter {
+    &:not(:empty) {
+      margin-top: calc(-2 * var(--spacing-unit)) !important;
+    }
+    & > * {
+      margin-top: calc(2 * var(--spacing-unit)) !important;
+    }
+  }
+  &.directionColumn.doubleItemGutter {
+    &:not(:empty) {
+      margin-left: calc(-2 * var(--spacing-unit)) !important;
+    }
+    &.doubleItemGutter > * {
+      margin-left: calc(2 * var(--spacing-unit)) !important;
+    }
+  }
 }
 
 .justifyFlexStart {
diff --git a/src/core/client/ui/components/Flex/Flex.mdx b/src/core/client/ui/components/Flex/Flex.mdx
index 84eeb8240..7ca59bb54 100644
--- a/src/core/client/ui/components/Flex/Flex.mdx
+++ b/src/core/client/ui/components/Flex/Flex.mdx
@@ -33,3 +33,29 @@ import Button from '../Button'
     <Button variant="filled">Push Me</Button>
   </Flex>
 </Playground>
+
+## Item Gutter
+
+<Playground>
+  <Flex direction="column" itemGutter>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
+
+<Playground>
+  <Flex direction="column" itemGutter="half">
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
+
+<Playground>
+  <Flex direction="column" itemGutter="double">
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+    <Button variant="filled">Push Me</Button>
+  </Flex>
+</Playground>
diff --git a/src/core/client/ui/components/Flex/Flex.tsx b/src/core/client/ui/components/Flex/Flex.tsx
index c29bd814c..bf66f9084 100644
--- a/src/core/client/ui/components/Flex/Flex.tsx
+++ b/src/core/client/ui/components/Flex/Flex.tsx
@@ -25,7 +25,7 @@ interface InnerProps {
     | "space-evenly";
   alignItems?: "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
   direction?: "row" | "column" | "row-reverse" | "column-reverse";
-  itemGutter?: boolean | "half";
+  itemGutter?: boolean | "half" | "double";
   className?: string;
   wrap?: boolean | "reverse";
 
@@ -43,6 +43,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
     itemGutter,
     wrap,
     forwardRef,
+    children,
     ...rest
   } = props;
 
@@ -55,6 +56,7 @@ const Flex: StatelessComponent<InnerProps> = props => {
   const classObject: Record<string, boolean> = {
     [classes.itemGutter]: itemGutter === true,
     [classes.halfItemGutter]: itemGutter === "half",
+    [classes.doubleItemGutter]: itemGutter === "double",
     [classes.wrap]: wrap === true,
     [classes.wrapReverse]: wrap === "reverse",
   };
@@ -75,12 +77,13 @@ const Flex: StatelessComponent<InnerProps> = props => {
     classObject[(classes as any)[`direction${pascalCase(direction)}`]] = true;
   }
 
-  const classNames: string = cn(classes.root, className, classObject);
+  const rootClassNames: string = cn(classes.root, className);
+  const flexClassNames: string = cn(classes.flex, classObject);
 
   // The first div is required to support nested `Flex` components with itemGutters.
   return (
-    <div>
-      <div ref={forwardRef} className={classNames} {...rest} />
+    <div ref={forwardRef} className={rootClassNames} {...rest}>
+      <div className={flexClassNames}>{children}</div>
     </div>
   );
 };
diff --git a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
index b1f72d74b..d96f60ebd 100644
--- a/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
+++ b/src/core/client/ui/components/Flex/__snapshots__/Flex.spec.tsx.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders correctly 1`] = `
-<div>
+<div
+  className="Flex-root"
+>
   <div
-    className="Flex-root Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
+    className="Flex-flex Flex-wrap Flex-justifyCenter Flex-alignCenter Flex-directionRow"
   >
     <div>
       Hello World
@@ -13,9 +15,11 @@ exports[`renders correctly 1`] = `
 `;
 
 exports[`renders with halfe item gutter 1`] = `
-<div>
+<div
+  className="Flex-root"
+>
   <div
-    className="Flex-root Flex-halfItemGutter Flex-wrap Flex-alignCenter"
+    className="Flex-flex Flex-halfItemGutter Flex-wrap Flex-alignCenter"
   >
     <div>
       Hello World
@@ -25,9 +29,11 @@ exports[`renders with halfe item gutter 1`] = `
 `;
 
 exports[`renders with item gutter 1`] = `
-<div>
+<div
+  className="Flex-root"
+>
   <div
-    className="Flex-root Flex-itemGutter Flex-wrap Flex-alignCenter"
+    className="Flex-flex Flex-itemGutter Flex-wrap Flex-alignCenter"
   >
     <div>
       Hello World
@@ -37,9 +43,11 @@ exports[`renders with item gutter 1`] = `
 `;
 
 exports[`renders with wrap 1`] = `
-<div>
+<div
+  className="Flex-root"
+>
   <div
-    className="Flex-root Flex-wrap Flex-alignCenter"
+    className="Flex-flex Flex-wrap Flex-alignCenter"
   >
     <div>
       Hello World
@@ -49,9 +57,11 @@ exports[`renders with wrap 1`] = `
 `;
 
 exports[`renders with wrap reverse 1`] = `
-<div>
+<div
+  className="Flex-root"
+>
   <div
-    className="Flex-root Flex-wrapReverse Flex-alignCenter"
+    className="Flex-flex Flex-wrapReverse Flex-alignCenter"
   >
     <div>
       Hello World