Css 当有许多项时，在引导导航栏中创建垂直滚动条

我在react应用程序中使用bootstrap制作了一个侧边栏。代码如下：

import React from 'react';
import './style_sidebar.css';

export default class Sidebar2 extends React.Component {
    render() {
        return (
            <div>
                <ul className="nav flex-column sidebar bg-dark">
                    <h3 className="text-warning mt-3 ml-2">Bootstrap Sidebar</h3>
                    <i className="fa fa-user-circle text-white mt-3 ml-5 pl-4 icon-user" style={{'fontSize': '5em'}}></i>
                    <h4 className="text-warning ml-3 mt-5">Components</h4>
                    <li className="nav-item">
                        <a className="nav-link text-light" href="#a"><i className="fa fa-table fa-lg"></i> Table<hr className="bg-warning" /></a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link text-light" href="#b"><i className="fa fa-bar-chart fa-lg"></i> Chart<hr className="bg-warning" /></a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link text-light" href="#c"><i className="fa fa-wpforms fa-lg"></i> Form Elements<hr className="bg-warning" /></a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link text-light" href="#c"><i className="fa fa-lemon-o fa-lg"></i> Coming Soon<hr className="bg-warning" /></a>
                    </li>
                    <li className="nav-item">
                        <a className="nav-link text-light" href="#c"><i className="fa fa-lemon-o fa-lg"></i> Coming Soon<hr className="bg-warning" /></a>
                    </li>
                </ul>
            </div>
        );
    }
}

现在，当我向

ul

添加更多项目时，这些项目会添加到页面顶部。因此，我使用了

overflow-y:scroll

在项目数量较多时创建一个垂直滚动条。但它不是y轴，而是水平滚动条。怎么解决这个问题

此外，我无法使其响应。我尝试过使用

媒体查询

，但由于我对bootstrap还不熟悉，我发现很难做到这一点

---

此外，如何使切换按钮的边栏，当屏幕大小很小的边栏应该崩溃。我想你明白我想说的。我正在使用最新版本的引导。如何操作？

您可以使用此flex wrap属性解决滚动问题：

.sidebar {
width: max-content;
height: 100vh;
padding: 10px;
position: fixed;
z-index: -1;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
overflow-y: auto;

}

---

为了响应，首先隐藏侧边栏，然后单击切换按钮进行切换。

它不起作用，我仍然使用水平滚动条而不是垂直滚动条。我已经解决了桌面的滚动问题，请看一看：。我的最小高度为：100vh，将其更改为高度：100vh&它按预期工作。如果未明确为定位项目设置高度，则不会显示滚动。干得好@sakpal

.sidebar {
width: max-content;
height: 100vh;
padding: 10px;
position: fixed;
z-index: -1;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
overflow-y: auto;