diff --git a/packages/cells/style/inputarea.css b/packages/cells/style/inputarea.css index ec6f1620c0ae..dd6eb6b7ff64 100644 --- 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,9 @@ body[data-format='mobile'] .jp-InputArea-editor { } .jp-InputPrompt { - flex: 0 0 var(--jp-cell-prompt-width); + display: table-cell; + vertical-align: top; + 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 +61,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 index 71834a31392c..b6cd45f2b4c7 100644 --- a/packages/cells/style/widget.css +++ b/packages/cells/style/widget.css @@ -77,11 +77,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) + ); } /*----------------------------------------------------------------------------- @@ -93,7 +91,8 @@ |----------------------------------------------------------------------------*/ .jp-MarkdownOutput { - flex: 1 1 auto; + display: table-cell; + width: 100%; margin-top: 0; margin-bottom: 0; padding-left: var(--jp-code-padding); diff --git a/packages/notebook/style/base.css b/packages/notebook/style/base.css index 4d90131c531e..53455bd558e1 100644 --- a/packages/notebook/style/base.css +++ b/packages/notebook/style/base.css @@ -62,7 +62,6 @@ .jp-Notebook .jp-Cell .jp-InputPrompt { cursor: move; - float: left; } /*----------------------------------------------------------------------------- diff --git a/packages/outputarea/style/base.css b/packages/outputarea/style/base.css index 39374eac13ec..9f66d485da18 100644 --- a/packages/outputarea/style/base.css +++ b/packages/outputarea/style/base.css @@ -20,16 +20,15 @@ } .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; + vertical-align: top; + 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 +50,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 +65,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 +163,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