diff --git a/docs/src/pages/components/Tabs.vue b/docs/src/pages/components/Tabs.vue
index 575dff3..9ff04ee 100644
--- a/docs/src/pages/components/Tabs.vue
+++ b/docs/src/pages/components/Tabs.vue
@@ -177,7 +177,23 @@
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
               </md-tab>
 
-              <md-tab id="pictures" md-label="Pictures" md-tooltip="This is the pictures tab!">
+              <md-tab id="pictures" md-label="Pictures">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
+              </md-tab>
+
+              <md-tab id="playlists" md-label="Playlists">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
+              </md-tab>
+
+              <md-tab id="albums" md-label="Albums">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
+              </md-tab>
+
+              <md-tab id="settings" md-label="Settings">
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
+              </md-tab>
+
+              <md-tab id="account" md-label="Account">
                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
               </md-tab>
             </md-tabs>
@@ -199,7 +215,23 @@
                   &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
                 &lt;/md-tab&gt;
 
-                &lt;md-tab id=&quot;pictures&quot; md-label=&quot;Pictures&quot; md-tooltip=&quot;This is the pictures tab!&quot;&gt;
+                &lt;md-tab id=&quot;pictures&quot; md-label=&quot;Pictures&quot; md-tooltip=&quot;&gt;
+                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
+                &lt;/md-tab&gt;
+
+                &lt;md-tab id=&quot;playlists&quot; md-label=&quot;Playlists&quot;&gt;
+                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
+                &lt;/md-tab&gt;
+
+                &lt;md-tab id=&quot;albums&quot; md-label=&quot;Albums&quot;&gt;
+                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
+                &lt;/md-tab&gt;
+
+                &lt;md-tab id=&quot;settings&quot; md-label=&quot;Settings&quot;&gt;
+                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
+                &lt;/md-tab&gt;
+
+                &lt;md-tab id=&quot;account&quot; md-label=&quot;Account&quot;&gt;
                   &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.&lt;/p&gt;
                 &lt;/md-tab&gt;
               &lt;/md-tabs&gt;
diff --git a/src/components/mdTabs/mdTabs.scss b/src/components/mdTabs/mdTabs.scss
index b842b6f..536bec8 100644
--- a/src/components/mdTabs/mdTabs.scss
+++ b/src/components/mdTabs/mdTabs.scss
@@ -1,4 +1,5 @@
 @import '../../core/stylesheets/variables.scss';
+@import '../../core/stylesheets/mixins.scss';
 
 $tab-width: 72px;
 $tab-max-width: 264px;
@@ -26,6 +27,7 @@ $tab-max-width: 264px;
     z-index: 1;
     display: flex;
     transition: $swift-ease-out;
+    overflow: hidden;
 
     &.md-has-icon.md-has-label {
       min-height: 72px;
@@ -50,12 +52,20 @@ $tab-max-width: 264px;
     }
   }
 
+  .md-tabs-navigation-container {
+    display: flex;
+    overflow-x: scroll;
+
+    @include layout-small-and-up {
+      margin-bottom: -15px;
+    }
+  }
+
   .md-tab-header {
     min-width: $tab-width;
     max-width: $tab-max-width;
     margin: 0;
     padding: 0 12px;
-    display: inline-block;
     position: relative;
     cursor: pointer;
     border: 0;
@@ -65,6 +75,7 @@ $tab-max-width: 264px;
     font-size: 14px;
     font-weight: 500;
     text-transform: uppercase;
+    flex-shrink: 0;
 
     &.md-disabled {
       cursor: default;
diff --git a/src/components/mdTabs/mdTabs.vue b/src/components/mdTabs/mdTabs.vue
index a917af7..b3b097d 100644
--- a/src/components/mdTabs/mdTabs.vue
+++ b/src/components/mdTabs/mdTabs.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="md-tabs" :class="[themeClass, tabClasses]">
     <md-whiteframe md-tag="nav" class="md-tabs-navigation" :md-elevation="mdElevation" :class="navigationClasses" ref="tabNavigation">
+      <div class="md-tabs-navigation-container" ref="tabsContainer" @scroll="calculateIndicatorPos">
       <button
         v-for="header in tabList"
         :key="header.id"
@@ -21,6 +22,7 @@
       </button>
 
       <span class="md-tab-indicator" :class="indicatorClasses" ref="indicator"></span>
+      </div>
     </md-whiteframe>
 
     <div class="md-tabs-content" ref="tabContent" :style="{ height: contentHeight }">
@@ -141,7 +143,7 @@
         if (this.$refs.tabHeader && this.$refs.tabHeader[this.activeTabNumber]) {
           const tabsWidth = this.$el.offsetWidth;
           const activeTab = this.$refs.tabHeader[this.activeTabNumber];
-          const left = activeTab.offsetLeft;
+          const left = activeTab.offsetLeft - this.$refs.tabsContainer.scrollLeft;
           const right = tabsWidth - left - activeTab.offsetWidth;
 
           this.$refs.indicator.style.left = left + 'px';