How to set editor height as 100% of the parent element?

v6
1

How to set editor height as 100% of the parent element? Setting height as definite values works but it doesn’t work for percentage values.

import { EditorView } from '@codemirror/view'

let fullHeightTheme = EditorView.theme({
  '&': {
    height: '500px',
    // height: '100%', this doesn't make the editor fill the parent div
  },
})
2

This is more about CSS than about CodeMirror, but making the parent display: flex often makes it easier to do this kind of sizing.

3

Fixed it by adding height 100% to ref element.

const [editor, setEditor] = React.useState<HTMLDivElement>()

const editorRef = React.useCallback((node: HTMLDivElement | null) => {
    if (!node) return
    setEditor(node)
}, [])

return <div ref={editorRef} style={{ height: '100%' }} />