Addon-docs: Fix fixed-position inline stories

addons/docs/common/README.md

@@ -85,7 +85,7 @@ basic.parameters = {
 }
 ```
 
-And for `MDX` you can modify it as an attribute on the `Story` element:
+And for `MDX` you can modify it, especially if you work with some components using fixed or sticky positions, as an attribute on the `Story` element:
 
 ```md
 <Story name='basic' height='400px'>{...}</Story>

lib/components/src/blocks/Preview.tsx

@@ -88,7 +88,6 @@ const StyledSource = styled(Source)<{}>(({ theme }) => ({
 const PreviewContainer = styled.div<PreviewProps>(
   ({ theme, withSource, isExpanded }) => ({
     position: 'relative',
-    overflow: 'hidden',
     margin: '25px 0 40px',
     ...getBlockBackgroundStyle(theme),
     borderBottomLeftRadius: withSource && isExpanded && 0,

lib/components/src/blocks/Story.stories.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { styled } from '@storybook/theming';
 import { Story, StoryError } from './Story';
 import { Button } from '../Button/Button';
 
@@ -23,3 +24,44 @@ export const Inline = () => <Story inline storyFn={buttonFn} title="hello button
 export const Error = () => <Story error={StoryError.NO_STORY} />;
 
 export const ReactHook = () => <Story inline storyFn={buttonHookFn} title="hello button" />;
+
+const FixedLayoutExample = styled.div(({ theme }) => ({
+  '&, header, aside, main': {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  },
+  header: {
+    height: '3rem',
+    background: theme.background.positive,
+  },
+  'aside, main': {
+    top: '3rem',
+  },
+  aside: {
+    width: '10rem',
+    background: theme.background.warning,
+  },
+  main: {
+    left: '10rem',
+    background: theme.background.negative,
+  },
+}));
+
+export const CustomHeight = () => (
+  <Story
+    inline
+    id="custom-height"
+    storyFn={() => (
+      <FixedLayoutExample>
+        <header />
+        <aside />
+        <main />
+      </FixedLayoutExample>
+    )}
+    height="15rem"
+    title="Define a custom story height for fixed position context for example"
+  />
+);

lib/components/src/blocks/Story.tsx

@@ -36,7 +36,9 @@ type StoryProps = InlineStoryProps | IFrameStoryProps;
 
 const InlineStory: FunctionComponent<InlineStoryProps> = ({ storyFn, height, id }) => (
   <Fragment>
-    {height ? <style>{`#story--${id} { min-height: ${height} }`}</style> : null}
+    {height ? (
+      <style>{`#story--${id} { min-height: ${height}; transform: 'translateZ(0)'; overflow: 'auto' }`}</style>
+    ) : null}
     <Fragment>
       {storyFn ? createElement(storyFn) : <EmptyBlock>{MISSING_STORY(id)}</EmptyBlock>}
     </Fragment>