Fix modern inline rendering with absolutely positioned elements

addons/docs/src/blocks/Story.tsx

@@ -133,21 +133,35 @@ const Story: FunctionComponent<StoryProps> = (props) => {
   if (!story) {
     return <div>Loading...</div>;
   }
-
-  if (global?.FEATURES.modernInlineRender) {
-    // We do this so React doesn't complain when we replace the span in a secondary render
-    const htmlContents = `<span data-is-loading-indicator="true">loading story...</span>`;
-    return (
-      <div ref={ref} data-name={story.name} dangerouslySetInnerHTML={{ __html: htmlContents }} />
-    );
-  }
-
   const storyProps = getStoryProps(props, story, context);
   if (!storyProps) {
     return null;
   }
+
+  if (global?.FEATURES.modernInlineRender) {
+    // We do this so React doesn't complain when we replace the span in a secondary render
+    const htmlContents = `<span data-is-loading-indicator="true">loading story...</span>`;
+
+    // FIXME: height/style/etc. lifted from PureStory
+    const { height } = storyProps;
+    return (
+      <div id={storyBlockIdFromId(story.id)}>
+        <MDXProvider components={resetComponents}>
+          {height ? (
+            <style>{`#story--${story.id} { min-height: ${height}; transform: translateZ(0); overflow: auto }`}</style>
+          ) : null}
+          <div
+            ref={ref}
+            data-name={story.name}
+            dangerouslySetInnerHTML={{ __html: htmlContents }}
+          />
+        </MDXProvider>
+      </div>
+    );
+  }
+
   return (
-    <div id={storyBlockIdFromId(storyProps.id)}>
+    <div id={storyBlockIdFromId(story.id)}>
       <MDXProvider components={resetComponents}>
         <PureStory {...storyProps} />
       </MDXProvider>

examples/official-storybook/stories/addon-docs/addon-docs-mdx.stories.mdx

@@ -21,9 +21,7 @@ import MdxNotes from '../notes/notes.mdx';
   title="Addons/Docs/mdx"
   component={TsButton}
   id="addons-docs-mdx-id"
-  decorators={[
-    (storyFn) => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>,
-  ]}
+  decorators={[(storyFn) => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>]}
   parameters={{ notes: 'component notes' }}
 />
 
@@ -35,10 +33,6 @@ import MdxNotes from '../notes/notes.mdx';
 
 <ArgsTable of="." />
 
-<Canvas>
-  <Story id="nonexistent-story" />
-</Canvas>
-
 ## Transclusion
 
 ### Markdown