滚动条不会一直延伸到配置文件

问：

我在这个侧边栏中的滚动条没有到达底部元素时遇到了问题;我不确定为什么它总是发生。如果你能帮助我，我将不胜感激。

这是我的 HTML 代码，以及 Bootstrap 类：

        <div class="d-block text-white bg-light position-fixed h-100 w-auto shadow overflow-y-auto overflow-x-hidden p-3" id="LeftBar" style="width: 150px">
            <ul class="nav flex-column text-light text-center">
                <li class="nav-item mb-1">
                    <a href="/home" class="d-flex nav-link active rounded-5 sidebar-buttons" aria-current="page">
                        <img id="home-image" class="bi me-2" width="20" height="20" data-light="/static/Images/Home/home-light.png" data-dark="/static/Images/Home/home-dark.png" src="">
                        <span>Home</span>
                    </a>
                </li>
            </ul>
            <ul class="nav flex-column text-light text-center">
                <li class="nav-item mb-1">
                    <a href="/news" class="d-flex nav-link inactive rounded-5 sidebar-buttons" aria-current="page">
                        <img id="news-image" class="bi me-2 mb-1" width="20" height="20" data-light="/static/Images/News/news-light.png" data-dark="/static/Images/News/news-dark.png" src="">
                        <span>News</span>
                    </a>
                </li>
            </ul>
            <ul class="nav flex-column text-light text-center">
                <li class="nav-item mb-1">
                    <a href="/weather" class="d-flex nav-link inactive rounded-5 sidebar-buttons" aria-current="page">
                        <img id="weather-image" class="bi me-2 mb-1" width="20" height="20" data-dark="/static/Images/Weather/weather-dark.png" data-light="/static/Images/Weather/weather-light.png" src="">
                        <span>Weather</span>
                    </a>
                </li>
            </ul>
            <ul class="nav flex-column text-light text-center">
                <li class="nav-item mb-1">
                    <a href="/subscriptions" class="d-flex nav-link inactive rounded-5 sidebar-buttons" aria-current="page">
                        <img id="subscriptions-image" class="bi me-2 mb-1" width="20" height="20" data-dark="/static/Images/Subscribe/subscribe-dark.png" data-light="/static/Images/Subscribe/subscribe-light.png" src="">
                        <span>Subscriptions</span>
                    </a>
                </li>
            </ul>
            <ul class="nav flex-column text-light text-center">
                <li class="nav-item mb-1">
                    <a href="/communities" class="d-flex nav-link inactive rounded-5 sidebar-buttons" aria-current="page">
                        <img id="communities-image" class="bi me-2 mb-1" width="20" height="20" data-dark="/static/Images/Communities/communities-dark.png" data-light="/static/Images/Communities/communities-light.png" src="">
                        <span>Communities</span>
                    </a>
                </li>
            </ul>
            <ul class="nav flex-column text-light text-center">
                <li class="nav-item mb-1">
                    <a href="/notifications" class="d-flex nav-link inactive rounded-5 sidebar-buttons" aria-current="page">
                        <img id="notifications-image" class="bi me-2 mb-1" width="20" height="20" data-dark="/static/Images/Notifications/notifications-dark.png" data-light="/static/Images/Notifications/notifications-light.png" src="">
                        <span>Notifications</span>
                    </a>
                </li>
            </ul>
            <ul class="nav flex-column text-light text-center">
                <li class="nav-item mb-1">
                    <a href="/favorites" class="d-flex nav-link inactive rounded-5 sidebar-buttons" aria-current="page">
                        <img id="favorites-image" class="bi me-2 mb-1" width="20" height="20" data-dark="/static/Images/Favorite/favorite-dark.png" data-light="/static/Images/Favorite/favorite-light.png" src="">
                        <span>Favorites</span>
                    </a>
                </li>
            </ul>
            <ul class="nav flex-column text-light text-center">
                <li class="nav-item mb-1">
                    <a href="/profile" class="d-flex nav-link inactive rounded-5 sidebar-buttons" aria-current="page">
                        <img id="profile-image" class="bi me-2 mb-1" width="20" height="20" data-dark="/static/Images/User/user-dark.png" data-light="/static/Images/User/user-light.png" src="">
                        <span>Profile</span>
                    </a>
                </li>
            </ul>
        </div>

以下是滚动条之前和之后的图片：

我以为滚动条会延伸到最底部的元素，但事实并非如此。