diff --git a/common/changes/office-ui-fabric-react/edwl-scrollablePaneFixWidth_2018-04-04-23-40.json b/common/changes/office-ui-fabric-react/edwl-scrollablePaneFixWidth_2018-04-04-23-40.json
new file mode 100644
index 0000000000000..175cf908e7669
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/edwl-scrollablePaneFixWidth_2018-04-04-23-40.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "ScrollablePane: Fix DetailsList rows not rendering.  Add maxWidth to StickyAbove/StickyBelow",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "edwl@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx
index 8ac7bcd7eb578..4508c6fd5a6f1 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx
@@ -102,10 +102,11 @@ export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}>
         { ...getNativeProps(this.props, divProperties) }
         ref={ this._root }
         className={ classNames.root }
+        data-is-scrollable={ true }
       >
         <div ref={ this._stickyAboveRef } className={ classNames.stickyAbove } />
         <div ref={ this._stickyBelowRef } className={ classNames.stickyBelow } />
-        <div data-is-scrollable={ true }>
+        <div>
           { this.props.children }
         </div>
       </div>
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.scss b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.scss
deleted file mode 100644
index 51378c8ce9e20..0000000000000
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@import '../../common/common';
-
-.root {
-  overflow-y: auto;
-  max-height: inherit;
-  height: inherit;
-  -webkit-overflow-scrolling: touch;
-}
-
-.stickyAbove,
-.stickyBelow {
-  position: absolute;
-  pointer-events: auto;
-  width: 100%;
-  z-index: 1;
-}
-
-.stickyAbove {
-  top: 0;
-
-  @include high-contrast {
-    border-bottom: 1px solid WindowText;
-  }
-}
-
-.stickyBelow {
-  bottom: 0;
-
-  @include high-contrast {
-    border-top: 1px solid WindowText;
-  }
-}
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts
index b89f518d1728c..05ebadc017de1 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts
@@ -13,6 +13,7 @@ export const getStyles = (
     position: 'absolute',
     pointerEvents: 'auto',
     width: '100%',
+    maxWidth: 'inherit',
     zIndex: 1
   };