diff --git a/skyux-spa-visual-tests/src/app/vertical-tabs/vertical-tabs.visual-spec.ts b/skyux-spa-visual-tests/src/app/vertical-tabs/vertical-tabs.visual-spec.ts
index f586f4aa5..14cb3c4aa 100644
--- a/skyux-spa-visual-tests/src/app/vertical-tabs/vertical-tabs.visual-spec.ts
+++ b/skyux-spa-visual-tests/src/app/vertical-tabs/vertical-tabs.visual-spec.ts
@@ -49,7 +49,8 @@ describe('Vertical tabSet', () => {
     return SkyVisualTest.setupTest('vertical-tabs', 480)
     .then(() => {
 
-      const showTabsButton = element(by.css('.sky-vertical-tabset-show-tabs-btn'));
+      const showTabsButton =
+        element(by.css('#screenshot-vertical-tabset .sky-vertical-tabset-show-tabs-btn'));
       browser.wait(function() { return browser.isElementPresent(showTabsButton); }, 8000);
 
       // show tabs
@@ -66,7 +67,8 @@ describe('Vertical tabSet', () => {
     return SkyVisualTest.setupTest('vertical-tabs', 480)
     .then(() => {
 
-      const showTabsButton = element(by.css('.sky-vertical-tabset-show-tabs-btn'));
+      const showTabsButton =
+        element(by.css('#screenshot-vertical-tabset .sky-vertical-tabset-show-tabs-btn'));
       browser.wait(function() { return browser.isElementPresent(showTabsButton); }, 8000);
 
       // show tabs
diff --git a/src/app/components/vertical-tabs/vertical-tabs-demo.component.html b/src/app/components/vertical-tabs/vertical-tabs-demo.component.html
index 1d7c143c8..ed1a71c8d 100644
--- a/src/app/components/vertical-tabs/vertical-tabs-demo.component.html
+++ b/src/app/components/vertical-tabs/vertical-tabs-demo.component.html
@@ -1,24 +1,26 @@
-<sky-vertical-tabset
-  showTabsText="Tab list"
-  (activeChange)="tabChanged($event)"
->
-  <sky-vertical-tabset-group 
-    *ngFor="let group of groups"
-    [groupHeading]="group.heading"
-    [open]="group.isOpen"
-    [disabled]="group.isDisabled"
+<div style="height: 40vh">
+  <sky-vertical-tabset
+    showTabsText="Tab list"
+    (activeChange)="tabChanged($event)"
   >
-    <sky-vertical-tab
-      *ngFor="let tab of group.subTabs"
-      [active]="tab.active"
-      [tabHeading]="tab.tabHeading"
-      [tabHeaderCount]="tab.tabHeaderCount"
-      [disabled]="tab.disabled"
+    <sky-vertical-tabset-group 
+      *ngFor="let group of groups"
+      [groupHeading]="group.heading"
+      [open]="group.isOpen"
+      [disabled]="group.isDisabled"
     >
-      {{ tab.content }}
-    </sky-vertical-tab>
-  </sky-vertical-tabset-group>
-</sky-vertical-tabset>
+      <sky-vertical-tab
+        *ngFor="let tab of group.subTabs"
+        [active]="tab.active"
+        [tabHeading]="tab.tabHeading"
+        [tabHeaderCount]="tab.tabHeaderCount"
+        [disabled]="tab.disabled"
+      >
+        {{ tab.content }}
+      </sky-vertical-tab>
+    </sky-vertical-tabset-group>
+  </sky-vertical-tabset>
+</div>
 
 <h3>Without groups</h3>
 <sky-vertical-tabset (activeChange)="tabChanged($event)">
diff --git a/src/modules/vertical-tabset/vertical-tabset.component.scss b/src/modules/vertical-tabset/vertical-tabset.component.scss
index bfa0f05ac..9f8f2d277 100644
--- a/src/modules/vertical-tabset/vertical-tabset.component.scss
+++ b/src/modules/vertical-tabset/vertical-tabset.component.scss
@@ -3,7 +3,11 @@
 @media (min-width: $sky-screen-sm-min) {
   .sky-vertical-tabset {
     display: flex;
-    max-height: 98vh;
+    height: 100%;
+  }
+
+  .sky-vertical-tabset-group-container {
+    @include sky-border(dark, right);
   }
 }