diff --git a/.changeset/few-carrots-mate.md b/.changeset/few-carrots-mate.md
new file mode 100644
index 00000000000..3590b51c080
--- /dev/null
+++ b/.changeset/few-carrots-mate.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/perseus-editor": patch
+---
+
+Put the left and right sides of the editor in separate scroll areas
diff --git a/packages/perseus-editor/src/__snapshots__/article-editor.test.tsx.snap b/packages/perseus-editor/src/__snapshots__/article-editor.test.tsx.snap
index b6350b42942..e96e2b4c042 100644
--- a/packages/perseus-editor/src/__snapshots__/article-editor.test.tsx.snap
+++ b/packages/perseus-editor/src/__snapshots__/article-editor.test.tsx.snap
@@ -11,11 +11,11 @@ exports[`ArticleEditor should match snapshot for editing disabled for all widget
       <div
         class="perseus-editor-row"
       >
-        <fieldset
-          disabled=""
+        <div
+          class="perseus-editor-left-cell"
         >
-          <div
-            class="perseus-editor-left-cell"
+          <fieldset
+            disabled=""
           >
             <div
               class="perseus-widget-editor"
@@ -15445,30 +15445,30 @@ table: [[☃ table 1]]
                 </div>
               </div>
             </div>
-          </div>
+          </fieldset>
+        </div>
+        <div
+          class="editor-preview"
+        >
           <div
-            class="editor-preview"
+            style="width: 726px;"
           >
-            <div
-              style="overflow: scroll; width: 726px;"
-            >
-              <div>
-                <div
+            <div>
+              <div
+                style="width: 100%; height: 100%;"
+              >
+                <iframe
+                  data-id="3"
+                  data-lint-gutter="true"
+                  data-mobile="false"
+                  data-name="content-preview"
+                  src="https://www.example.com"
                   style="width: 100%; height: 100%;"
-                >
-                  <iframe
-                    data-id="3"
-                    data-lint-gutter="true"
-                    data-mobile="false"
-                    data-name="content-preview"
-                    src="https://www.example.com"
-                    style="width: 100%; height: 100%;"
-                  />
-                </div>
+                />
               </div>
             </div>
           </div>
-        </fieldset>
+        </div>
       </div>
       <div
         class="perseus-editor-row"
diff --git a/packages/perseus-editor/src/__snapshots__/editor-page.test.tsx.snap b/packages/perseus-editor/src/__snapshots__/editor-page.test.tsx.snap
index 08839721df7..bdfb083eca5 100644
--- a/packages/perseus-editor/src/__snapshots__/editor-page.test.tsx.snap
+++ b/packages/perseus-editor/src/__snapshots__/editor-page.test.tsx.snap
@@ -15509,7 +15509,7 @@ table: [[☃ table 1]]
             id="problemarea"
           >
             <div
-              style="overflow: scroll; width: 726px;"
+              style="width: 726px;"
             >
               <div>
                 <div
diff --git a/packages/perseus-editor/src/article-editor.tsx b/packages/perseus-editor/src/article-editor.tsx
index 2ddd32b4110..27cb4954fa7 100644
--- a/packages/perseus-editor/src/article-editor.tsx
+++ b/packages/perseus-editor/src/article-editor.tsx
@@ -215,8 +215,8 @@ export default class ArticleEditor extends React.Component<Props, State> {
                 {sections.map((section, i) => {
                     return [
                         <div className="perseus-editor-row" key={i}>
-                            <fieldset disabled={editingDisabled}>
-                                <div className="perseus-editor-left-cell">
+                            <div className="perseus-editor-left-cell">
+                                <fieldset disabled={editingDisabled}>
                                     <IssuesPanel
                                         issues={this.state.issues[i]}
                                     />
@@ -297,12 +297,12 @@ export default class ArticleEditor extends React.Component<Props, State> {
                                         placeholder="Type your section text here..."
                                         ref={"editor" + i}
                                     />
-                                </div>
+                                </fieldset>
+                            </div>
 
-                                <div className="editor-preview">
-                                    {this._renderIframePreview(i, true)}
-                                </div>
-                            </fieldset>
+                            <div className="editor-preview">
+                                {this._renderIframePreview(i, true)}
+                            </div>
                         </div>,
                     ];
                 })}
diff --git a/packages/perseus-editor/src/components/device-framer.tsx b/packages/perseus-editor/src/components/device-framer.tsx
index 71943c701a7..ce18f18ec1c 100644
--- a/packages/perseus-editor/src/components/device-framer.tsx
+++ b/packages/perseus-editor/src/components/device-framer.tsx
@@ -48,7 +48,6 @@ const DeviceFramer = ({
     const withChromeStyle = React.useMemo(
         () => ({
             backgroundColor: "white",
-            overflow: "scroll",
             color: "black",
             textAlign: "left",
             width: SCREEN_SIZES[deviceType].width,
@@ -69,7 +68,6 @@ const DeviceFramer = ({
             <div
                 key="screen"
                 style={{
-                    overflow: "scroll",
                     width:
                         SCREEN_SIZES[deviceType].framedWidth +
                         2 * perseusFrameBorderWidth +
diff --git a/packages/perseus-editor/src/styles/perseus-editor.css b/packages/perseus-editor/src/styles/perseus-editor.css
index 7cde51160b7..253e1a279a0 100644
--- a/packages/perseus-editor/src/styles/perseus-editor.css
+++ b/packages/perseus-editor/src/styles/perseus-editor.css
@@ -230,7 +230,6 @@ code {
 }
 #perseus {
     margin: 20px;
-    width: calc(100% - 500px);
     z-index: 10;
 }
 #perseus #problemarea #workarea {
@@ -265,30 +264,43 @@ code {
     z-index: 3;
     /* interactive-content */
 }
-.perseus-editor-table {
-    clear: both;
-    display: table;
-    table-layout: fixed;
-}
 .perseus-editor-row {
-    display: table-row;
+    display: flex;
+    flex-direction: row;
 }
 .perseus-editor-left-cell {
-    display: table-cell;
-    padding-right: 30px;
+    display: flex;
+    flex-direction: column;
     vertical-align: top;
     width: 360px;
     max-width: 360px;
     min-width: 360px;
     position: relative;
     z-index: 10;
+    /* Make the left cell scrollable. */
+    overflow-y: auto;
+    /* Don't show the the horizontal scrollbar that only appears when
+     * the vertical scrollbar appears. */
+    overflow-x: hidden;
+    /* Keep the left cell scroll area within the viewport. (244px to account
+     * for the header.) */
+    max-height: calc(95vh - 244px);
 }
 .perseus-editor-right-cell {
     box-sizing: border-box;
-    display: table-cell;
+    display: flex;
+    flex-direction: column;
     padding: 30px;
     padding-top: 5px;
     vertical-align: top;
+    /* Make the right cell scrollable. */
+    overflow-y: auto;
+    /* Keep the left cell scroll area within the viewport. (244px to account
+     * for the header.) */
+    max-height: calc(95vh - 244px);
+    /* Don't shrink below the preview's intrinsic width. We need this to
+     * preserve the Tablet and Desktop preview widths. */
+    flex-shrink: 0;
 }
 .perseus-hint-editor {
     padding-bottom: 20px;
@@ -330,10 +342,6 @@ code {
     margin-bottom: 20px;
     margin-top: 20px;
 }
-.perseus-article-editor .perseus-editor-table {
-    margin-left: auto;
-    margin-right: auto;
-}
 .perseus-article-editor .perseus-single-editor {
     margin-bottom: 10px;
 }
@@ -363,7 +371,14 @@ code {
     padding: 32px 20px;
 }
 .perseus-article-editor .editor-preview {
-    display: table-cell;
+    /* Make the preview scrollable. */
+    overflow-y: auto;
+    /* Keep the left cell scroll area within the viewport. (244px to account
+     * for the header.) */
+    max-height: calc(95vh - 244px);
+    /* Don't shrink below the preview's intrinsic width. We need this to
+     * preserve the Tablet and Desktop preview widths. */
+    flex-shrink: 0;
 }
 .perseus-article-editor .editor-preview.full-width {
     width: 100%;
diff --git a/packages/perseus-editor/src/testing/preview/exercise-preview-page.tsx b/packages/perseus-editor/src/testing/preview/exercise-preview-page.tsx
index 6ec27994113..fc74d350cad 100644
--- a/packages/perseus-editor/src/testing/preview/exercise-preview-page.tsx
+++ b/packages/perseus-editor/src/testing/preview/exercise-preview-page.tsx
@@ -21,6 +21,15 @@ const ExercisePreviewPage = () => {
     const [iframeId, setIframeId] = React.useState<string | null>(null);
     const containerRef = React.useRef<HTMLDivElement>(null);
 
+    // Set the overflow to hidden on the body within the iframe
+    // to prevent nested scrollbars from appearing.
+    React.useEffect(() => {
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = "auto";
+        };
+    }, []);
+
     // Read iframe configuration from dataset attributes
     React.useEffect(() => {
         // eslint-disable-next-line no-restricted-syntax