[Drawer] Problem with changing content container height

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

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?

Expected behavior 🤔

No response

Steps to reproduce 🕹

1. I opened the example: https://codesandbox.io/s/8upzkt?file=/demo.js
2. I removed some text
3. I have added a background to the color of the Box

Context 🔦

No response

Your environment 🌎

  System:
    OS: macOS 11.5
  Binaries:
    Node: 14.15.4 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.10 - /usr/local/bin/npm
  Browsers:
    Chrome: 98.0.4758.109
    Edge: Not Found
    Firefox: 97.0.1
    Safari: 14.1.2
  npmPackages:
    @emotion/react: ^11.8.1 => 11.8.1 
    @emotion/styled: ^11.8.1 => 11.8.1 
    @mui/base:  5.0.0-alpha.70 
    @mui/icons-material: ^5.4.4 => 5.4.4 
    @mui/material: ^5.4.4 => 5.4.4 
    @mui/private-theming:  5.4.4 
    @mui/styled-engine:  5.4.4 
    @mui/styles: ^5.4.4 => 5.4.4 
    @mui/system:  5.4.4 
    @mui/types:  7.1.2 
    @mui/utils:  5.4.4 
    @types/react:  17.0.11 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^16.13.1 => 16.14.0 
    styled-components: ^5.3.3 => 5.3.3 

Start with the Responsive drawer documentation example and its linked CodeSandbox demo.js; reproduce the result after removing text and adding a background to the Box. Compare the content container height with the expected full background behavior, and use the demo to verify the final layout.