0

I don't know if my css is bad, or if there is bug in codemirror, and if there is a workaround.

I have an element with a specified height. Inside I have 3 rows, 2 fixed size, and the middle one taking up the remaining space. In that space I want to put a codemirror editor but as soon as there are more lines than fit in the space it looks like it expands to 100% the height of the outer container rather 100% height of the row it's in.

Any idea how to get it to stick to the correct size?

const elem = document.querySelector('.editor');
const codeMirror = CodeMirror(elem, {
  value: new Array(12).fill(0).map((_,i) => `line ${i + 1}`).join('\n'),
  mode:  "javascript",
  theme: "base16-dark",
});
@import "https://unpkg.com/codemirror@5.58.1/lib/codemirror.css";
@import "https://unpkg.com/codemirror@5.58.1/theme/base16-dark.css";

.two-columns {
  display: flex;
  background: pink;  
  width: 100%;
}
.left, .right { width: 50%; }
.left  { background: red; opacity: 0.6; }
.right { background: orange; }
.row1  { background: yellow; }
.row2  { background: purple; flex: 1 1 auto; }
.row3  { background: green;  }

.three-rows {
  display: flex;
  flex-direction: column;
  height: 150px;
}

.editor {
  width: 100%;
  height: 100%;
  position: relative;
}
.CodeMirror {
  height: 100%;
}
<script src="https://unpkg.com/codemirror@5.58.1/lib/codemirror.js"></script>
<script src="https://unpkg.com/codemirror@5.58.1/mode/javascript/javascript.js"></script>

<div class="two-columns">
  <div class="left">
    <div class="three-rows">
      <div class="row1">row1</div>
      <div class="row2">row2</div>
      <div class="row3">row3</div>
    </div>
  </div>
  <div class="right">
    <div class="three-rows">
      <div class="row1">row 1</div>
      <div class="row2 editor"></div>
      <div class="row3">row 3</div>
    </div>
  </div>
</div>

note: the left column is only there to show the correct size. If you delete some lines from the codemirror area you'll see it fill out to the correct size but it overshoots if there are more lines

I don't really want some hacked solution like

.row2 {
  height: calc(100% - 2something);
}

What's in the other rows shouldn't matter, all that matters is the parent has a fixed height and one row is takes up the space the other rows don't

gman
  • 100,619
  • 31
  • 269
  • 393
  • min-height:0 to editor – Temani Afif Oct 06 '20 at 09:02
  • by the way, you had luck in the left example because of the shrink but your logic is wrong using height:100% beucause height:100% consider all the parent height and doesn't exclude the other child (you need flex-grow:1) – Temani Afif Oct 06 '20 at 09:03
  • I have flex-grow 1 ;) But thank you for the answer than thank you to whoever mark this as a dupe. Sorry I didn't find the answer on my own. – gman Oct 06 '20 at 09:21

0 Answers0