diff --git a/packages/tab/src/css/index.js b/packages/tab/src/css/index.js
index b35c17164d..1057c525a1 100644
--- a/packages/tab/src/css/index.js
+++ b/packages/tab/src/css/index.js
@@ -43,7 +43,6 @@ export default {
     position: 'relative',
     width: '100%',
     height: '64px',
-    outline: '1px solid red',
     overflow: 'hidden',
     '&:focus': {
       outline: 'none',
@@ -69,6 +68,7 @@ export default {
     display: 'flex',
     height: '64px',
     transform: 'translateX(0)'
+    // transition: `transform ${core.motion.speedSlow} ease-in-out`
   },
 
   '.psds-tab__overflow-button': {
diff --git a/packages/tab/src/react/__specs__/__snapshots__/storyshots.spec.js.snap b/packages/tab/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
index ea67c1e7d2..13dd8c7499 100644
--- a/packages/tab/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
+++ b/packages/tab/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
@@ -1416,6 +1416,1369 @@ exports[`Storyshots scrolling 30 count 1`] = `
 </div>
 `;
 
+exports[`Storyshots scrolling 35 count 1`] = `
+<div
+  data-css-claeju=""
+>
+  <div
+    data-css-wx7ofq=""
+  >
+    <div
+      data-css-1nnsngu=""
+    >
+      <div
+        data-css-claeju=""
+      >
+        <div>
+          <div
+            data-css-1f140p2=""
+            onKeyDown={[Function]}
+            role="tablist"
+            tabIndex="0"
+          >
+            <div
+              data-css-1mwad1w=""
+              style={
+                Object {
+                  "transform": "translateX(0px)",
+                }
+              }
+            >
+              <button
+                aria-selected={true}
+                data-css-bn3734=""
+                id="example0"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 0
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example1"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 1
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example2"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 2
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example3"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 3
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example4"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 4
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example5"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 5
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example6"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 6
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example7"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 7
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example8"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 8
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example9"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 9
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example10"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 10
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example11"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 11
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example12"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 12
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example13"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 13
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example14"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 14
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example15"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 15
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example16"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 16
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example17"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 17
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example18"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 18
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example19"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 19
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example20"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 20
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example21"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 21
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example22"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 22
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example23"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 23
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example24"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 24
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example25"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 25
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example26"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 26
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example27"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 27
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example28"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 28
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example29"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 29
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example30"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 30
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example31"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 31
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example32"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 32
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example33"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 33
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+              <button
+                aria-selected={false}
+                data-css-dp4ver=""
+                id="example34"
+                onClick={[Function]}
+                role="tab"
+                tabIndex="-1"
+              >
+                <div
+                  data-css-sgoz4b=""
+                  tabIndex="-1"
+                >
+                  Menu 34
+                  <span
+                    data-css-1s34vsj=""
+                  />
+                </div>
+              </button>
+            </div>
+          </div>
+          <div
+            aria-labelledby="example2"
+            role="tabpanel"
+          >
+            <div
+              className="content"
+            >
+              Menu stuff 2
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots scrolling thinner container 1`] = `
+<div
+  data-css-claeju=""
+>
+  <div
+    data-css-wx7ofq=""
+  >
+    <div
+      data-css-1nnsngu=""
+    >
+      <div
+        data-css-claeju=""
+      >
+        <div
+          style={
+            Object {
+              "outline": "1px solid red",
+              "width": "50%",
+            }
+          }
+        >
+          <div>
+            <div
+              data-css-uxkdi0=""
+              onKeyDown={[Function]}
+              role="tablist"
+              tabIndex="0"
+            >
+              <div
+                data-css-1mwad1w=""
+                style={
+                  Object {
+                    "transform": "translateX(0px)",
+                  }
+                }
+              >
+                <button
+                  aria-selected={true}
+                  data-css-bn3734=""
+                  id="example0"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 0
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example1"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 1
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example2"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 2
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example3"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 3
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example4"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 4
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example5"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 5
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example6"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 6
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example7"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 7
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example8"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 8
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example9"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 9
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example10"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 10
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example11"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 11
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example12"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 12
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example13"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 13
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example14"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 14
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example15"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 15
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example16"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 16
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example17"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 17
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example18"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 18
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example19"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 19
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example20"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 20
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example21"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 21
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example22"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 22
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example23"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 23
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example24"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 24
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example25"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 25
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example26"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 26
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example27"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 27
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example28"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 28
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example29"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 29
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example30"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 30
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example31"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 31
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example32"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 32
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example33"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 33
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+                <button
+                  aria-selected={false}
+                  data-css-dp4ver=""
+                  id="example34"
+                  onClick={[Function]}
+                  role="tab"
+                  tabIndex="-1"
+                >
+                  <div
+                    data-css-sgoz4b=""
+                    tabIndex="-1"
+                  >
+                    Menu 34
+                    <span
+                      data-css-1s34vsj=""
+                    />
+                  </div>
+                </button>
+              </div>
+            </div>
+            <div
+              aria-labelledby="example2"
+              role="tabpanel"
+            >
+              <div
+                className="content"
+              >
+                Menu stuff 2
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots style overrides list no borderBottom (style) 1`] = `
 <div
   data-css-claeju=""
diff --git a/packages/tab/src/react/__stories__/index.story.js b/packages/tab/src/react/__stories__/index.story.js
index 633151a3f7..dfa6283b91 100644
--- a/packages/tab/src/react/__stories__/index.story.js
+++ b/packages/tab/src/react/__stories__/index.story.js
@@ -57,9 +57,15 @@ storiesOf('default', module)
 
 storiesOf('scrolling', module)
   .addDecorator(themeDecorator(addons))
-  .add('10 count', _ => <NavigableExample count={20} />)
+  .add('10 count', _ => <NavigableExample count={10} />)
   .add('20 count', _ => <NavigableExample count={20} />)
-  .add('30 count', _ => <NavigableExample count={20} />)
+  .add('30 count', _ => <NavigableExample count={30} />)
+  .add('35 count', _ => <NavigableExample count={35} />)
+  .add('thinner container', _ => (
+    <div style={{ outline: '1px solid red', width: '50%' }}>
+      <NavigableExample count={35} />
+    </div>
+  ))
 
 storiesOf('style overrides', module)
   .addDecorator(themeDecorator(addons))
diff --git a/packages/tab/src/react/list.js b/packages/tab/src/react/list.js
index c2c8c12c54..4571bb5197 100644
--- a/packages/tab/src/react/list.js
+++ b/packages/tab/src/react/list.js
@@ -24,8 +24,9 @@ const styles = {
 }
 
 const OverflowButton = withTheme(props => {
+  const { themeName, ...rest } = props
   return (
-    <button {...styles.overflowButton(props)} tabIndex="-1">
+    <button {...styles.overflowButton(props)} tabIndex="-1" {...rest}>
       <Icon
         id={
           props.position === 'right' ? Icon.ids.caretRight : Icon.ids.caretLeft
@@ -46,10 +47,12 @@ const List = React.forwardRef(function List(props, listRef) {
   const sliderRef = React.useRef()
   const activeIndexFromProps = findActiveIndex(props.children)
 
+  // TODO: likely rename
   const [dims, setDims] = React.useState({
     isOverflowingLeft: false,
     isOverflowingRight: false
   })
+  const [xOffset, setXOffset] = React.useState(0)
 
   const [activeIndex, setActiveIndex] = React.useState(
     activeIndexFromProps > -1 ? activeIndexFromProps : 0
@@ -65,25 +68,30 @@ const List = React.forwardRef(function List(props, listRef) {
     },
     [activeIndex, activeIndexFromProps]
   )
+  // TODO: handle window resize
 
   React.useEffect(
     () => {
       const listWidth = getWidth(listRef)
       const sliderWidth = getWidth(sliderRef)
-      const isOverflowingRight = sliderWidth > listWidth
+      const isOverflowingRight = sliderWidth + xOffset > listWidth
 
       const listLeftX = getLeftX(listRef)
       const sliderLeftX = getLeftX(sliderRef)
-      const isOverflowingLeft = sliderLeftX < listLeftX
+      const isOverflowingLeft = sliderLeftX + xOffset < listLeftX
 
       setDims({
         isOverflowingLeft,
         isOverflowingRight
       })
     },
-    [listRef, sliderRef]
+    [listRef, sliderRef, xOffset]
   )
 
+  // TODO: try to move most of these out
+  function styleForXOffset(xOffset) {
+    return { transform: `translateX(${xOffset}px)` }
+  }
   function getWidth(ref) {
     if (!(ref && ref.current)) return 0
     const rect = ref.current.getBoundingClientRect()
@@ -94,6 +102,12 @@ const List = React.forwardRef(function List(props, listRef) {
     const rect = ref.current.getBoundingClientRect()
     return window.pageXOffset + rect.left
   }
+  // TODO: test if we WANT scroll left worked into this (since always a container)
+  function getRightX(ref) {
+    if (!(ref && ref.current)) return 0
+    const rect = ref.current.getBoundingClientRect()
+    return window.pageXOffset + rect.left + rect.width
+  }
   function handleListItemClick(i, originalOnClick, evt) {
     setActiveIndex(i)
     if (typeof originalOnClick === 'function') originalOnClick(i, evt)
@@ -111,6 +125,24 @@ const List = React.forwardRef(function List(props, listRef) {
     }
   }
 
+  function handlePageLeft(evt) {
+    evt.preventDefault()
+    const pageWidth = getWidth(listRef)
+    const offscreenLeftWidth = getLeftX(listRef) - getLeftX(sliderRef)
+    const smallestNeededWidth = Math.min(pageWidth, offscreenLeftWidth)
+    const lesserXOffset = xOffset + smallestNeededWidth
+    setXOffset(lesserXOffset)
+  }
+
+  function handlePageRight(evt) {
+    evt.preventDefault()
+    const pageWidth = getWidth(listRef)
+    const offscreenRightWidth = getRightX(sliderRef) - getRightX(listRef)
+    const smallestNeededWidth = Math.min(pageWidth, offscreenRightWidth)
+    const furtherXOffset = xOffset - smallestNeededWidth
+    setXOffset(furtherXOffset)
+  }
+
   const { children, ...rest } = props
   const listProps = {
     ...rest,
@@ -124,8 +156,14 @@ const List = React.forwardRef(function List(props, listRef) {
       {...styles.list(listProps)}
       ref={listRef}
     >
-      {dims.isOverflowingLeft && <OverflowButton position="left" />}
-      <div {...styles.slider(rest)} ref={sliderRef}>
+      {dims.isOverflowingLeft && (
+        <OverflowButton position="left" onClick={handlePageLeft} />
+      )}
+      <div
+        {...styles.slider(rest)}
+        ref={sliderRef}
+        style={styleForXOffset(xOffset)}
+      >
         {React.Children.map(
           props.children,
           (comp, i) =>
@@ -138,7 +176,9 @@ const List = React.forwardRef(function List(props, listRef) {
             })
         )}
       </div>
-      {dims.isOverflowingRight && <OverflowButton position="right" />}
+      {dims.isOverflowingRight && (
+        <OverflowButton position="right" onClick={handlePageRight} />
+      )}
     </div>
   )
 })