improve flex-expand-horiz

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

@@ -40,7 +40,7 @@ export const BasicLayout = ({ children, className }: Props): JSX.Element => {
 
           <div className="flex-expand-vert">{/* neccessary for nested {children} make expanded */}
             <AlertSiteUrlUndefined />
-            <div className="flex-expand-horiz h-100">{/* neccessary for nested {children} make expanded */}
+            <div className="flex-expand-horiz">{/* neccessary for nested {children} make expanded */}
               {children}
             </div>
           </div>

packages/core/scss/placeholders/_flex-expand.scss

@@ -1,8 +1,9 @@
 // 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;
+  flex-grow: 1;
+  height: 100%;
 }
 
 // ref: https://discuss.codemirror.net/t/how-to-fit-the-codemirror-6-widget-into-a-flex-div/4207/4

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

@@ -18,7 +18,7 @@ export const Playground = (): JSX.Element => {
       <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-expand-horiz d-flex overflow-y-auto">
         <div className="flex-expand-vert">
           <CodeMirrorEditorContainer ref={containerRef} />
         </div>