unable to set height to 100%

[NimBuzz01]

Hi,
I'm trying to set the height of the codemirror component to fill the container. The main box is set to take 100% of the previous container. and the box of the codemirror component is set to flexgrow:1, which takes up the rest of the space in the container. I want my CodeMirror component to fill the height of this entire box. but when I set its height to 100%, it just becomes a single line. How do I fix this? TIA

<Box
        sx={{
          width: { width },
          border: 1,
          borderRadius: 1,
          borderColor: "grey.500",
          display: "flex",
          flexDirection: "column",
          height: 1,
        }}
      >
        // Rest of the code
        <Box sx={{ flexGrow: 1 }}>
          <CodeMirror
            placeholder={placeholder}
            value={value}
            height={height} // "100%"
            theme={darkMode ? aura : xcodeLight}
            extensions={[langExtensions[fileType]()]}
            onChange={onChange}
            readOnly={readOnly}
          />
        </Box>
      </Box>

[NimBuzz01]

[FIXED] - set the style of the CodeMirror to 100% as well

<CodeMirror
            style={{ height: "100%" }}
            placeholder={placeholder}
            value={value}
            height={height} // "100%"
            theme={darkMode ? aura : xcodeLight}
            extensions={[langExtensions[fileType]()]}
            onChange={onChange}
            readOnly={readOnly}
          />