Can't get CodeMirror v6 to fill flex 1 parent container?

v6
1

I have this sandbox which has this code basically (using react codemirror v6):

<div
  style={{
    position: "relative",
    display: "flex",
    flexDirection: "column",
    height: "calc(100vh - 64px)",
  }}
>
  <header>Hello world</header>
  <p>I am some spacing content</p>
  <p>I am some spacing content</p>
  <p>I am some spacing content</p>
  <div style={{ flex: 1, height: "100%" }}>
    <CodeMirror
      style={{ flex: 1 }}
      height="100%"
      value={code}
      options={codeOptions}
    />
  </div>
</div>

I’ve tired every combination of possible parents, percents, flex: 1, and the rest, but nothing will work when the code in the editor takes up more height than the allowed area.

I want there to be some prose text above the editor (taking up a little height), and then the editor to fill the remaining screen height. I have tried for hours to get it to work but there’s always something that goes wrong. It seems to work possibly in CodeMirror v5, but not in v6, which my whole app is based around. Can you get it to work?