I am currently using MUI version 5 to create a table. In this table, there are two columns with cells that contain multiline TextFields. My goal is to have the TextFields completely fill the cell area. However, I am encountering an issue where when I start entering lines into the text field in one column, the height of the textfield in the other column remains the same and does not adjust to fill out the table cell. Image: https://i.stack.imgur.com/vLCeZ.png
In the image, red represents the backgroundColor of the TableCell, while yellow represents the backgroundColor of the TextField. I want to avoid seeing any red; I would like the textfield in the left column to increase its height as data is added to the right textfield.
I have experimented with different CSS combinations involving height 100% and positions. Additionally, I have tried using flexbox on the TableCell and flexGrow on the Input, but this caused issues with the TableCell not filling up the height of the row.
For reference, here is a code example: https://codesandbox.io/s/mui-playground-forked-xst8h?file=/src/containers/app.js
import React from "react";
import * as material from "@material-ui/core";
const App = () => (
<material.TableContainer component={material.Paper}>
<material.Table aria-label="simple table" stickyHeader={true} size="small">
<material.TableBody>
<material.TableRow>
<material.TableCell
align="center"
style={{
backgroundColor: "red",
padding: 0,
height: "100%"
}}
>
<material.TextField
multiline
variant="outlined"
style={{
flexGrow: 1,
height: "100%",
width: "100%",
backgroundColor: "yellow"
}}
/>
</material.TableCell>
<material.TableCell
align="center"
style={{
backgroundColor: "red",
padding: 0
}}
>
<material.TextField
multiline
variant="outlined"
style={{
height: "100%",
width: "100%",
backgroundColor: "yellow"
}}
/>
</material.TableCell>
</material.TableRow>
</material.TableBody>
</material.Table>
</material.TableContainer>
);
export default App;