Repository: ant-design
Issue: 当有多个菜单项时，Menu组件在IE11下出现兼容问题。Menu Component is incompatible with IE11 when there are many Menu Items
Labels: Internet Explorer,help wanted,Inactive,IE | Firefox | Safari

- [x] I have searched the [issues](https://github.com/ant-design/ant-design/issues) of this repository and believe that this is not a duplicate.

### Reproduction link
[https://github.com/tEgRaT/antd-demo/tree/main/src](https://github.com/tEgRaT/antd-demo/tree/main/src)

### Steps to reproduce
I setup my project with create-react-app, and use a Menu component with horizontal mode on top of my page. I have added the below 2 lines to the very top of index.js:

使用create-react-app创建一个项目，在页面顶部使用ant design的Menu组件放置一个水平菜单，在index.js的最顶部添加如下两行代码：
```
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable'; 
```
and added "ie 11" to "browserslist" section in package.json's "production" and "development". 

并且在package.json的browserlist的production和development两项下分别添加“ie 11”。

code of App.js is below: 

App.js的代码如下：
```
import React from 'react';
import { Layout, Menu, Breadcrumb } from 'antd';
import './App.css';

const { Header, Content, Footer } = Layout;

const App = () => {
  return (
    <Layout className="layout">
      <Header>
        <div className="logo" />
        <Menu
          theme="dark"
          mode="horizontal"
          defaultSelectedKeys={['2']}
        >
          {new Array(20).fill(null).map((_, index) => {
            const key = index   1;
            return <Menu.Item key={key}>{`nav ${key}`}</Menu.Item>;
          })}
        </Menu>
      </Header>
      <Content style={{ padding: '0 50px' }}>
        <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        <div className="site-layout-content">Content</div>
      </Content>
      <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
    </Layout>
  );
};

export default App;
```
import antd at the top of both index.css and App.css: 

在index.css和App.css的顶部引入antd：
```
@import '~antd/dist/antd.css';
```

### What is expected?
If I have many Menu items, those items which overflow the viewport should be collapsed. When point to the three-dot icon, collapsed menu items expand vertically, just like in Chrome. 

如果有多个菜单项，则超出屏幕右侧的菜单项应该折叠，鼠标指向右上角三个点的图标时，折叠的菜单项展示，就像在Chrome中那样。

<img width="905" alt="屏幕截图 2021-07-29 131918" src="https://user-images.githubusercontent.com/13448467/127436587-72d30127-d5b9-430a-b5d4-7a9efa536208.png">

### What is actually happening?
If there are many menu items, those items which overflow the viewport are not collapsed in ie 11. Instead, they just line up in a row and extend beyond the viewport (win 10, IE 11), or wrap to the next line (win 7, IE 11). 

如果有多个菜单项，超出窗口的菜单项在IE11中不会折叠。实际上，会一直向右延伸到可视范围之外（win10，IE11）或者折到下一行（win7, IE11）。

<img width="963" alt="屏幕截图 2021-07-29 132913" src="https://user-images.githubusercontent.com/13448467/127436744-c80c06bb-1432-41ac-abb5-71706b1df1d1.png">

I pressed CTRL-A to highlight the items beyond the viewport.

为了能看到超出可视范围的菜单项，我按了CTRL-A以反显这些项目。

| Environment | Info |
|---|---|
| antd | 4.16.9 |
| React | 17.0.2 |
| System | win10 |
| Browser | ie 11 |


<!-- generated by ant-design-issue-helper. DO NOT REMOVE -->