How to avoid content reflow with Ant Design's responsive Sider

Question

I expect the responsive Sider component to expand without causing the reflow of elements in Content component, which is not the case with my render method as below.

import 'antd/dist/antd.css';

// ...skipped

render() {
  return (
    <Layout>
      <Sider
        breakpoint="sm"
        collapsedWidth="0"
        onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
        style={{ minHeight: "100vh" }}
      >
        <Menu theme="dark" mode="inline" selectedKeys={['1']}>
          <Menu.Item key="1">
            <Icon type="user" />
            <span className="nav-text">nav 1</span>
          </Menu.Item>
          <Menu.Item key="2">
            <Icon type="video-camera" />
            <span className="nav-text">nav 2</span>
          </Menu.Item>
        </Menu>
      </Sider>
      <Layout>
        <Content style={{ margin: '10px', padding: "15px" }}>
          <ListOfData />
        </Content>
      </Layout>
    </Layout>
  );
}

What I want to achieve is the Sider effect applied in Ant Design's documentations site when it is visited with a mobile view port, which visually pushed the page content to the right.

I took a look at the site mentioned above with react inspection tool, but I can't tell which official component is used to do that. However, I am guessing it mixed the Drawer component in Ant Design Mobile, because the drawer class was there.

Is it possible to use only the components from Ant Design to achieve that?

What I want

My Collapsed Sider

My Expanded Sider

Answer 1

OK. We are a year further. When I was playing with the CodePen which is linked on https://ant.design/components/layout/ and adding:

<Sider
  ..
  style={{position: "absolute", height: "100vh"}}
  ..

it simply worked for me..