[v2] Ant Design components don't work correctly (body > div sets height 100%)

[jugglingcats]

🐛 Bug Report

The components we are trying to document use Ant Design (https://ant.design). The docusaurus stylesheet contains the following:

body > div {
  height: 100%;
  display: flex;
  flex-direction: column;
}

This causes a problem with Ant Design (and potentially other libs) as their code creates a div under body for some components, and expect these to not be 100% height. The additional height causes issue for mouse events and effectively locks up most of the page.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

Note that the example project below is using Lerna. This is just to make the repro easier -- our actual project doesn't use Lerna but exhibits the same behaviour.

1. Download / clone https://github.com/jugglingcats/docusaurus-repro
2. lerna bootstrap
3. cd docusaurus-site
4. npm start
5. Navigate to Ant Design Example page
6. Click on select dropdown to open and close it again
7. Try to open it again

Expected behavior

Page should continue to work.

Actual Behavior

Page is unresponsive. This is due to height 100% on the div that antd adds to end of body:

A workaround is to force body > div to be auto size in custom.css:

body > div {
  height: auto !important;
}

It looks to me that there is only one div in the default docusaurus page and it has an id, so maybe a more specific css rule would be more appropriate in the default stylesheet.

Your Environment

• Docusaurus version used: 2.0.0-alpha.43
• Ant Design 4.0.1
• Environment name and version (e.g. Chrome 78.0.3904.108, Node.js 10.17.0):
• Operating system and version (desktop or mobile):

Reproducible Demo

https://github.com/jugglingcats/docusaurus-repro

See above for detailed steps.