How to fit the codemirror 6 widget into a flex div?

v6
1

Hello everyone, I am trying to build a code editing app, with code and preview. I have a flex layout that I use to structure the layout.


Here is a rough mock-up for reference:

<body>
  <div id='root' style='display:flex;flex-direction:column;height:100vh;width:100vw'>
    <div class='frame-vert' style='background:black'>
      <p style='color:white;align-self:center'>TITLE</p>
    </div>
     <div class='frame-horiz' style='flex:18'>
       <div class='frame-vert'>
         <div id='codemirror-wrapper'>
          <!--HERE IS THE CODEMIRROR EDITOR-->
         </div>
       </div>
       <div class='frame-vert' style='background:gray'>
         <p>THIS IS MEANT TO BE CODE PREVIEW</p>
       </div>
     </div>
     <div class='frame-vert' style='background:black'>
       <p style='color:white;align-self:center'>FOOTER</p>
     </div>
  </div>
</body>

body {
  margin: 0px;
}
    
.frame-horiz {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.frame-vert {
  display: flex;
  flex-direction: column;
  flex: 1;
}

Here is a codepen link to see what I want it to look like.

My question is how would I style the Codemirror 6 widget so that it fits within the remaining flexbox space allocated to it inside the codemirror-wrapper.
I tried going this in the theme object for Codemirror 6:

{
  '&': {
    flex: '1',
  }
}

And this:

{
  '&': {
    height: '100%',
    width: '100%',
  }
}

And they work to stretch the codemirror editor to the appropriate width and height, but when you create enough new lines, the codemirror element becomes taller than it’s parent element and gets hidden behind the bottom footer element.
Here is an illustration of the issue:

Untitled
Untitled4216×2400 87.8 KB

The red striped area is the codemirror widget overexpanding and hiding behind the footer element. This causes there to appear a general page scroll bar, since the total content on the page is greater than view height, as well as a scrollbar next to codemirror itself.

Here is a video demo of this happening: demo

Could someone help me see what’s going on?

1 Like
2

I don’t have a deep enough understanding of flexbox to say much here, but in similar situations I’ve seen adding an additional relatively positioned element around the editor (and making the editor 100% its size) solve this.

3

so wrapping the editor in a relatively positioned div?
so

#codemirror-wrapper {
  position: relative;
}

interesting

EDIT: no still the same issue. Codemirror is weird man

4

You were so close. Add overflow: auto to the style of

<div class='frame-horiz' style='flex:18'>

or

<div class='frame-horiz' style='flex:18; overflow: auto;'>

Here’s a CodeSandBox that shows the demonstrated result.

5

Thankyou. I’ll check it out