simplify flex expansion

apps/app/src/components/Layout/BasicLayout.tsx

@@ -38,7 +38,7 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
         <div className="page-wrapper flex-row">
           <Sidebar />
 
-          <div className="flex-grow-1">
+          <div className="flex-expand-vert">
             <AlertSiteUrlUndefined />
             {children}
           </div>

apps/app/src/components/PageEditor/EditorNavbarBottom.tsx

@@ -100,7 +100,7 @@ const EditorNavbarBottom = (): JSX.Element => {
         </Collapse>
       )
       }
-      <div className={`navbar navbar-expand border-top px-2 px-md-3 ${additionalClasses.join(' ')}`}>
+      <div className={`flex-expand-horiz align-items-center border-top px-2 px-md-3 ${additionalClasses.join(' ')}`}>
         <form className="form-inline">
           { isDeviceSmallerThanMd && renderDrawerButton() }
           { isOptionsSelectorEnabled && !isDeviceSmallerThanMd && <OptionsSelector /> }

apps/app/src/components/PageEditor/PageEditor.tsx

@@ -574,7 +574,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
 
   return (
     <div data-testid="page-editor" id="page-editor" className={`flex-grow-1 d-flex overflow-y-auto ${props.visibility ? '' : 'd-none'}`}>
-      <div className="page-editor-editor-container flex-grow-1 d-flex flex-column" style={{ flexBasis: 0 }}>
+      <div className="page-editor-editor-container flex-expand-vert">
         {/* <Editor
           ref={editorRef}
           value={initialValue}
@@ -589,7 +589,7 @@ export const PageEditor = React.memo((props: Props): JSX.Element => {
         /> */}
         <CodeMirrorEditorContainer ref={codeMirrorEditorContainerRef} />
       </div>
-      <div className="page-editor-preview-container flex-grow-1 mw-0 d-none d-lg-flex flex-column" style={{ flexBasis: 0 }}>
+      <div className="page-editor-preview-container flex-expand-vert d-none d-lg-flex">
         <Preview
           ref={previewRef}
           rendererOptions={rendererOptions}

apps/app/src/styles/style-app.scss

@@ -1,3 +1,5 @@
+@import '@growi/core/scss/flex-expand';
+
 @import 'mixins';
 
 // atoms

packages/core/scss/_flex-expand.scss

@@ -0,0 +1,13 @@
+// ref: https://discuss.codemirror.net/t/how-to-fit-the-codemirror-6-widget-into-a-flex-div/4207/4
+.flex-expand-horiz {
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+}
+
+// ref: https://discuss.codemirror.net/t/how-to-fit-the-codemirror-6-widget-into-a-flex-div/4207/4
+.flex-expand-vert {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}

packages/editor/src/components/playground/Playground.tsx

@@ -15,18 +15,18 @@ export const Playground = (): JSX.Element => {
 
   return (
     <>
-      <div className="flex-grow-1 d-flex flex-column justify-content-center align-items-center bg-dark" style={{ minHeight: '83px' }}>
+      <div className="flex-expand-vert justify-content-center align-items-center bg-dark" style={{ minHeight: '83px' }}>
         <div className="text-white">GrowiSubNavigation</div>
       </div>
       <div className="flex-grow-1 d-flex overflow-y-auto">
-        <div className="flex-grow-1 d-flex flex-column" style={{ flexBasis: 0 }}>
+        <div className="flex-expand-vert">
           <CodeMirrorEditorContainer ref={containerRef} />
         </div>
-        <div className="flex-grow-1 mw-0 d-none d-lg-flex flex-column bg-light border-start border-dark-subtle p-3" style={{ flexBasis: 0 }}>
+        <div className="flex-expand-vert d-none d-lg-flex bg-light border-start border-dark-subtle p-3">
           <PlaygroundController />
         </div>
       </div>
-      <div className="flex-grow-1 d-flex flex-column justify-content-center align-items-center bg-dark" style={{ minHeight: '50px' }}>
+      <div className="flex-expand-vert justify-content-center align-items-center bg-dark" style={{ minHeight: '50px' }}>
         <div className="text-white">EditorNavbarBottom</div>
       </div>
     </>

packages/editor/src/main.scss

@@ -1 +1,3 @@
 @import 'bootstrap';
+
+@import '@growi/core/scss/flex-expand';