diff --git a/docs/src/app/components/pages/components/Tabs/ExampleScrollable.jsx b/docs/src/app/components/pages/components/Tabs/ExampleScrollable.jsx
new file mode 100644
index 00000000000000..e57f98ce3122eb
--- /dev/null
+++ b/docs/src/app/components/pages/components/Tabs/ExampleScrollable.jsx
@@ -0,0 +1,176 @@
+import React from 'react';
+import Tabs from 'material-ui/lib/tabs/tabs';
+import Tab from 'material-ui/lib/tabs/tab';
+import Slider from 'material-ui/lib/slider';
+
+const styles = {
+  headline: {
+    fontSize: 24,
+    paddingTop: 16,
+    marginBottom: 12,
+    fontWeight: 400,
+  },
+};
+
+const TabsExampleScrollable = () => (
+  <Tabs>
+    <Tab label="Item One" >
+      <div>
+        <h2 style={styles.headline}>Tab One Template Example</h2>
+        <p>
+          This is an example of a tab template!
+        </p>
+        <p>
+          You can put any sort of HTML or react component in here. It even keeps the component state!
+        </p>
+        <Slider name="slider0" defaultValue={0.5} />
+      </div>
+    </Tab>
+    <Tab label="Item Two" >
+      <div>
+        <h2 style={styles.headline}>Tab Two Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Three" >
+      <div>
+        <h2 style={styles.headline}>Tab Three Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Four" >
+      <div>
+        <h2 style={styles.headline}>Tab Four Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Five" >
+      <div>
+        <h2 style={styles.headline}>Tab Five Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Six" >
+      <div>
+        <h2 style={styles.headline}>Tab Six Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Seven" >
+      <div>
+        <h2 style={styles.headline}>Tab Seven Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Eight" >
+      <div>
+        <h2 style={styles.headline}>Tab Eight Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Nine" >
+      <div>
+        <h2 style={styles.headline}>Tab Nine Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Ten" >
+      <div>
+        <h2 style={styles.headline}>Tab Ten Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Eleven" >
+      <div>
+        <h2 style={styles.headline}>Tab Eleven Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Twelve" >
+      <div>
+        <h2 style={styles.headline}>Tab Twelve Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Thirteen" >
+      <div>
+        <h2 style={styles.headline}>Tab Thirteen Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Fourteen" >
+      <div>
+        <h2 style={styles.headline}>Tab Fourteen Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Fifteen" >
+      <div>
+        <h2 style={styles.headline}>Tab Fifteen Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Sixteen" >
+      <div>
+        <h2 style={styles.headline}>Tab Sixteen Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Seventeen" >
+      <div>
+        <h2 style={styles.headline}>Tab Seventeen Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Eighteen" >
+      <div>
+        <h2 style={styles.headline}>Tab Eighteen Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+    <Tab label="Item Nineteen" >
+      <div>
+        <h2 style={styles.headline}>Tab Nineteen Template Example</h2>
+        <p>
+          This is another example of a tab template!
+        </p>
+      </div>
+    </Tab>
+  </Tabs>
+);
+
+export default TabsExampleScrollable;
diff --git a/docs/src/app/components/pages/components/Tabs/Page.jsx b/docs/src/app/components/pages/components/Tabs/Page.jsx
index 2920b27b5bba02..3312f548598cdb 100644
--- a/docs/src/app/components/pages/components/Tabs/Page.jsx
+++ b/docs/src/app/components/pages/components/Tabs/Page.jsx
@@ -9,6 +9,8 @@ import tabsExampleControlledCode from '!raw!./ExampleControlled';
 import TabsExampleControlled from './ExampleControlled';
 import tabsExampleSwipeableCode from '!raw!./ExampleSwipeable';
 import TabsExampleSwipeable from './ExampleSwipeable';
+import tabsExampleScrollableCode from '!raw!./ExampleScrollable';
+import TabsExampleScrollable from './ExampleScrollable';
 import tabsCode from '!raw!material-ui/lib/tabs/tabs';
 import tabsText from './Tabs';
 import tabCode from '!raw!material-ui/lib/tabs/tab';
@@ -26,6 +28,9 @@ const TabsPage = () => (
     <CodeExample code={tabsExampleSwipeableCode}>
       <TabsExampleSwipeable />
     </CodeExample>
+    <CodeExample code={tabsExampleScrollableCode}>
+      <TabsExampleScrollable />
+    </CodeExample>
     <PropTypeDescription
       code={tabsCode}
       header={tabsText} />
diff --git a/src/tabs/tabs.jsx b/src/tabs/tabs.jsx
index ae6ab912b68e02..5970d9736eb417 100644
--- a/src/tabs/tabs.jsx
+++ b/src/tabs/tabs.jsx
@@ -118,7 +118,7 @@ const Tabs = React.createClass({
   getDefaultProps() {
     return {
       initialSelectedIndex: 0,
-      stretchTabContainer: false,
+      stretchTabContainer: true,
     };
   },
 
@@ -151,8 +151,8 @@ const Tabs = React.createClass({
   },
 
   componentDidMount() {
+    window.requestAnimationFrame(this.handleWindowWidthChange);
     Events.on(window, 'resize', this.handleWindowWidthChange);
-    this.replaceState(this.getNewState());
   },
 
   componentWillReceiveProps(newProps, nextContext) {
@@ -326,21 +326,24 @@ const Tabs = React.createClass({
     let paginationChange = this.state.shouldPaginate !== nextShouldPaginate;
     if (paginationChange || tabContainerWidth !== this.state.tabContainerWidth || tabWrapperWidthChange) {
       let nextSelectedTab = tabInfo[this.state.selectedIndex];
-      let tabScrollWrapper = this._getDOMNode(Constants.TAB_SCROLL_WRAPPER_REF_NAME);
-      let tabScrollWrapperLeftScroll = tabScrollWrapper.scrollLeft;
-      let tabScrollWrapperWidth = tabScrollWrapper.offsetWidth;
-      let tabPaginationButtonMargin = nextShouldPaginate ? Constants.TAB_PAGINATOR_BUTTON_DEFAULT_WIDTH : 0;
-      let tabVisible = nextSelectedTab.leftOffset - tabPaginationButtonMargin >= tabScrollWrapperLeftScroll
-        && tabScrollWrapperLeftScroll + tabScrollWrapperWidth - nextSelectedTab.rightOffset
-        - tabPaginationButtonMargin >= 0;
-      if (!tabVisible) {
-        let shouldScrollRight = tabScrollWrapperLeftScroll + tabScrollWrapperWidth
-          - nextSelectedTab.rightOffset - tabPaginationButtonMargin < 0;
-        // calculate how much to set tag scroll wrapper's scrollLeft to
-        if (shouldScrollRight) {
-          tabScrollWrapper.scrollLeft = nextSelectedTab.rightOffset + tabPaginationButtonMargin - tabScrollWrapperWidth;
-        } else {
-          tabScrollWrapper.scrollLeft = nextSelectedTab.leftOffset - tabPaginationButtonMargin;
+      if (nextSelectedTab !== undefined) {
+        let tabScrollWrapper = this._getDOMNode(Constants.TAB_SCROLL_WRAPPER_REF_NAME);
+        let tabScrollWrapperLeftScroll = tabScrollWrapper.scrollLeft;
+        let tabScrollWrapperWidth = tabScrollWrapper.offsetWidth;
+        let tabPaginationButtonMargin = nextShouldPaginate ? Constants.TAB_PAGINATOR_BUTTON_DEFAULT_WIDTH : 0;
+        let tabVisible = nextSelectedTab.leftOffset - tabPaginationButtonMargin >= tabScrollWrapperLeftScroll
+          && tabScrollWrapperLeftScroll + tabScrollWrapperWidth - nextSelectedTab.rightOffset
+          - tabPaginationButtonMargin >= 0;
+        if (!tabVisible) {
+          let shouldScrollRight = tabScrollWrapperLeftScroll + tabScrollWrapperWidth
+            - nextSelectedTab.rightOffset - tabPaginationButtonMargin < 0;
+          // calculate how much to set tag scroll wrapper's scrollLeft to
+          if (shouldScrollRight) {
+            tabScrollWrapper.scrollLeft = nextSelectedTab.rightOffset + tabPaginationButtonMargin
+              - tabScrollWrapperWidth;
+          } else {
+            tabScrollWrapper.scrollLeft = nextSelectedTab.leftOffset - tabPaginationButtonMargin;
+          }
         }
       }
     }
@@ -365,7 +368,8 @@ const Tabs = React.createClass({
 
 
     // stretch tabs if stretchTabContainer is true and if device screen size is large
-    let shouldStretch = stretchTabContainer && this.isDeviceSize(StyleResizable.statics.Sizes.LARGE);
+    let shouldStretch = stretchTabContainer && this.isDeviceSize(StyleResizable.statics.Sizes.LARGE)
+      && !this.state.shouldPaginate;
 
     let themeVariables = this.state.muiTheme.tabs;
     let styles = {