Material-UI Grid Item height

2022 Update (MUI v5):

MUI v5 now relies on the CSS grid. Check out the official documentation here: https://mui.com/system/grid

With this setup, you can set display: "grid", gridTemplateColumns: "repeat(5, 1fr)" on the container Box element to render 5 grid items with the same width and height. See an example with both fixed and variable number of columns here: https://codesandbox.io/s/black-river-3i2ub?file=/src/GridDemo.tsx

// Fixed number of columns
const gridContainer = {
  display: "grid",
  gridTemplateColumns: "repeat(5, 1fr)"
};

// Variable number of columns
const gridContainer2 = {
  display: "grid",
  gridAutoColumns: "1fr",
  gridAutoFlow: "column"
};

const gridItem = {
  margin: "8px",
  border: "1px solid red"
};

export default function GridDemo() {
  return (
    <Box sx={gridContainer}>
      <Box sx={gridItem}>Item #1</Box>
      <Box sx={gridItem}>Item #2</Box>
      <Box sx={gridItem}>Item #3</Box>
      <Box sx={gridItem}>
        Item #4 has a long text inside. Lorem ipsum dolor sit amet, consectetur
        adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
        laboris nisi ut aliquip ex ea commodo consequat.
      </Box>
      <Box sx={gridItem}>Item #5</Box>
    </Box>
  );
}

Old answer (MUI v1):

Simply apply height: 100% to the children of Grid items. In the code you have provided in the sandbox, add this property to the section class:

const section = {
  height: "100%",
  paddingTop: 5,
  backgroundColor: "#fff"
};

Please note that the code sample in your question is different from the sandbox, so the JSX should look like this:

<Grid item xs={12} md={4}>
  <div style={section}>component</div>
</Grid>

Here's the updated sandbox with a working demo: https://codesandbox.io/s/m7r7jnzzlx (no longer compiles as of 2022-01-10)

I think just setting {{alignItems="stretch"}} in the Grid container will do what you want? (It makes all items the height of the container, when direction="row").