Editor inside a flexbox

[frafall]

I am trying to have the MDEditor inside a flex box to fill the available height with no luck, anyone done this?

To verify my setup I've tested a TextField instead of the MDEditor which worked as it should.

Any suggestions on how to have the edit textarea flexGrow?

Best regards Morten

Ex

<TextField
   id="content"
   autoFocus
   fullWidth
   type="text"
   name="content"
   label="Content"
   margin="dense"
   onBlur={handleBlur}
   onChange={handleChange}
   value={value}
   helperText={touched.content && errors.content}
   error={Boolean(errors.content && touched.content)}

   multiline
   sx={{
       display: 'flex', 
       flexGrow: 1,
   }}

   InputProps={{
       sx: {
           display: 'flex', 
           flexGrow: 1,
           height: '100%',
           alignItems: 'start'
       }
   }}
/>

and

<MDEditor
   value={value}
   preview="edit"
   hideToolbar={false}
   visibleDragbar={false}
 
   onBlur={handleBlur}
   onChange={(content) => setFieldValue("content", content)}
 
   //height={"100%"}
   height={470}
   
   textareaProps={{ 
       name: 'content',
   }}
/>