Incorrect Ant design Layout display format

import React, {Component} from "react";
import {Layout} from "antd";
import Main from "./Main";

const {Footer, Sider, Content} = Layout;

class App extends Component {
    render() {
        return (
            <div>
                <div>
                    <Layout>
                        <Layout>
                            <Sider>Sider</Sider>
                            <Content>Content</Content>
                        </Layout>
                        <Footer>Footer</Footer>
                    </Layout>
                </div>
                <Main />
            </div>
        );
    }
}

export default App;

I came down the Layout code, directly from the official copy. I just removed the Header.. The display is incorrect. It is strange that typing the same code with codepen on the official website is correct.

my incorrectly displayed picture:

codepen:

I know to @ import"~ antd/dist/antd.css";
all other components of the copy can be displayed normally from the ant design official website, except for the abnormal Layout display

May.22,2021

is the layout all right? the official website just adds some styles to demo


<Layout>
    <Layout style={{ height: '100px' }}>
        <Sider>Sider</Sider>
        <Content>Content</Content>
    </Layout>
    <Footer>Footer</Footer>
</Layout>

look flat because there is little content, and set the outermost layout to 100vh high just to fill the screen.

Menu