Search code examples
javascriptreactjsresponsive-designmaterial-uidrawer

React js material ui problem box inside responsive drawer

enter image description here

I took the example on the documentation regarding the Responsive drawer.

As can be seen from the image, the part of the content at a certain height that depends on the context of it.

But I would like the background of the context as seen from the image to be the same.

I tried adding to the text box, either using flex: 1 orheight: "100%", but nothing changes.

Link: codesandbox

How can I do?

Solution

  • The simplest way to make it work as expected is to assign a maximum height of viewport (height: 100vh) to your box component.

    ...
<Box component="main" 
sx={{ 
  flexGrow: 1,
  p: 3, 
  width: { sm: `calc(100% - ${drawerWidth}px)` }, 
  height: '100vh', 
  color: "#fff", 
  backgroundColor: "#212121" 
}}>
  <Toolbar />
  <Typography paragraph>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
  </Typography>
</Box>
...

    Working example:

    Edit ResponsiveDrawer Material Demo (forked)

    Note: your solutions won't work because of the following:

    • height property with a percentage value will be inherited from the parent element since the parent element height by default is auto (which is inherited from its parent too), so it won't work as expected.
    • flex property won't work as expected because the flex-direction will be row by default. But it also won't work if you change it to column since the maximum height of the container is auto and it follows the same rule as above.