I am trying to use the Sider component from Ant Design for my frontend to create a menu with sub-options. I enabled the collapsible property on it so I can expand that menu. The problem is that if I have multiple options expanded in that menu, some sub-options go behind that button (instead of the slider that should appear to scroll the page).

My code looks like this:

<Layout
        style={{
          marginTop: headerHeight
        }}
      >
        <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}
          width='15vw'
          style={{
            background: colorBgContainer,
            padding: 0
          }}
        >
          <Menu
            theme="dark"
            mode="inline"
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            style={{
              height: '90vh',
              borderRight: 0
            }}
            items={items2}
          />
        </Sider>
</Layout>

Note: The marginTop property from the Layout component is used to place this menu under the header (by 10vh). I tested without this offset, just in case to see if there is a problem with it but it also reproduces.

When only one option is selected, it looks natural, like this:

But when more are selected, some sub-options overlap the collapsible button: