diff --git a/src/components/Messages/Messages.css b/src/components/Messages/Messages.css
index ff66a6da..51fc8ca2 100644
--- a/src/components/Messages/Messages.css
+++ b/src/components/Messages/Messages.css
@@ -4,13 +4,15 @@
   margin: 0;
 
   /* Clearfix */
-  width: 100%;
-  overflow: auto;
+  @apply --clearfix;
 }
 
 .messageItem {
   margin-bottom: 35px;
 
+  /* Clearfix */
+  @apply --clearfix;
+
   @media (--viewportMedium) {
     margin-bottom: 40px;
   }
diff --git a/src/components/Messages/Messages.example.js b/src/components/Messages/Messages.example.js
index 69fed49e..f110c876 100644
--- a/src/components/Messages/Messages.example.js
+++ b/src/components/Messages/Messages.example.js
@@ -28,6 +28,7 @@ export const WithCurrentUser = {
     messages: [
       createMessage('msg1', {}, { sender: createUser('user1') }),
       createMessage('msg2', {}, { sender: createUser('user2') }),
+      createMessage('msg3', {}, { sender: createUser('user1') }),
     ],
     currentUser: createCurrentUser('user2'),
   },
diff --git a/src/marketplace.css b/src/marketplace.css
index 1bac4dfe..9e4a8495 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -96,6 +96,16 @@
   --modalPadding: 24px 24px 48px 24px;
   --modalPaddingMedium: 55px 60px 55px 60px;
 
+  /* ================ Clearfix solution ================ */
+
+  --clearfix {
+    &:after {
+      content: '';
+      display: table;
+      clear: both;
+    }
+  }
+
   /* ================ Links ================ */
 
   --marketplaceLinkStyles: {