Avoid use of flexbox

jupyterlab · Nov 22, 2021 · 91011ba · 91011ba
1 parent 8a8c375
commit 91011ba
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 30 deletions.
diff --git a/packages/cells/style/inputarea.css b/packages/cells/style/inputarea.css
@@ -9,18 +9,19 @@
 
 /* All input areas */
 .jp-InputArea {
-  display: flex;
-  flex-direction: row;
+  display: table;
   overflow: hidden;
 }
 
-body[data-format='mobile'] .jp-InputArea {
-  flex-direction: column;
-}
-
 .jp-InputArea-editor {
-  flex: 1 1 auto;
+  display: table-cell;
+  width: 100%;
   overflow: hidden;
+  vertical-align: top;
+}
+
+body[data-format='mobile'] .jp-InputArea-editor {
+  display: table-row;
 }
 
 .jp-InputArea-editor {
@@ -35,7 +36,8 @@ body[data-format='mobile'] .jp-InputArea-editor {
 }
 
 .jp-InputPrompt {
-  flex: 0 0 var(--jp-cell-prompt-width);
+  display: table-cell;
+  min-width: var(--jp-cell-prompt-width);
   color: var(--jp-cell-inprompt-font-color);
   font-family: var(--jp-cell-prompt-font-family);
   padding: var(--jp-code-padding);
@@ -58,6 +60,6 @@ body[data-format='mobile'] .jp-InputArea-editor {
 }
 
 body[data-format='mobile'] .jp-InputPrompt {
-  flex: 0 0 auto;
+  display: table-row;
   text-align: left;
 }
diff --git a/packages/cells/style/widget.css b/packages/cells/style/widget.css
@@ -76,11 +76,9 @@
 }
 
 .jp-CodeCell.jp-mod-outputsScrolled .jp-OutputArea-prompt {
-  flex: 0 0
-    calc(
-      var(--jp-cell-prompt-width) -
-        var(--jp-private-cell-scrolling-output-offset)
-    );
+  min-width: calc(
+    var(--jp-cell-prompt-width) - var(--jp-private-cell-scrolling-output-offset)
+  );
 }
 
 /*-----------------------------------------------------------------------------
@@ -92,7 +90,7 @@
 |----------------------------------------------------------------------------*/
 
 .jp-MarkdownOutput {
-  flex: 1 1 auto;
+  width: 100%;
   margin-top: 0;
   margin-bottom: 0;
   padding-left: var(--jp-code-padding);
@@ -119,7 +117,6 @@
 }
 
 .jp-MarkdownCell:hover .jp-collapseHeadingButton {
-  display: flex;
   min-height: var(--jp-cell-collapser-min-height);
   position: absolute;
   right: 0;

diff --git a/packages/outputarea/style/base.css b/packages/outputarea/style/base.css
@@ -20,16 +20,14 @@
 }
 
 .jp-OutputArea-child {
-  display: flex;
-  flex-direction: row;
-}
-
-body[data-format='mobile'] .jp-OutputArea-child {
-  flex-direction: column;
+  display: table;
+  width: 100%;
+  overflow: hidden;
 }
 
 .jp-OutputPrompt {
-  flex: 0 0 var(--jp-cell-prompt-width);
+  display: table-cell;
+  min-width: var(--jp-cell-prompt-width);
   color: var(--jp-cell-outprompt-font-color);
   font-family: var(--jp-cell-prompt-font-family);
   padding: var(--jp-code-padding);
@@ -51,11 +49,13 @@ body[data-format='mobile'] .jp-OutputArea-child {
 }
 
 body[data-format='mobile'] .jp-OutputPrompt {
-  flex: 0 0 auto;
+  display: table-row;
   text-align: left;
 }
 
 .jp-OutputArea-output {
+  display: table-cell;
+  width: 100%;
   height: auto;
   overflow: auto;
   user-select: text;
@@ -64,12 +64,8 @@ body[data-format='mobile'] .jp-OutputPrompt {
   -ms-user-select: text;
 }
 
-.jp-OutputArea-child .jp-OutputArea-output {
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-
 body[data-format='mobile'] .jp-OutputArea-child .jp-OutputArea-output {
+  display: table-row;
   margin-left: var(--jp-notebook-padding);
 }
 
@@ -166,7 +162,7 @@ body.lm-mod-override-cursor .jp-OutputArea-output.jp-mod-isolated:before {
 
 .jp-OutputArea-output.jp-OutputArea-executeResult {
   margin-left: 0px;
-  flex: 1 1 auto;
+  width: 100%;
 }
 
 /* Text output with the Out[] prompt needs a top padding to match the