Editor inside a flexbox

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',
   }}
/>

Start at the MDEditor component and reproduce the flexbox case using the issue's TextField and MDEditor examples, including textareaProps and the fixed height. Trace how the editor's textarea sizing is handled; done means the edit area fills the available flex height without requiring a fixed height.