导航侧边栏覆盖下一列内容

Question

我有一个按预期在加载时出现的侧边栏，但它会覆盖其容器列并在下一节列上溢出。

我使用 css 文件中的.active-nav 使侧边栏在加载时保持粘性，但它会溢出其大小，如果没有 active-nav，侧边栏不会在加载时显示，但我没有定位问题...

这是 HTML 部分：

{% extends "base.html" %}
{% block content %}

<!-- Sidebar section -->
<nav class="navbar active-nav navbar-expand d-flex flex-column align-item-start" id="sidebar">
  <div class="p-4 pt-5">

<!-- User image -->
  <div class="text-center">
    <img src="{{url_for('static',filename='profile_pics/two.jpg')}}" class="rounded" alt="Profile">
  </div>

 <!-- Navbar menus -->
  <ul class="navbar-nav d-flex flex-column mt-5 w-100">
      <li class="nav-item dropdown w-100">
        <a href="#equitiesSubmenu" class="nav-link dropdown-toggle text-light pl-4" id="equitiesSubmenu" role="button" data-bs-toggle="collapse" aria-expanded="true">Equities</a>
        <ul class="collapse lisst-unstyled" id="equitiesSubmenu">
            <li><a href="{{url_for('core.simulator')}}" class="dropdown-item text-light pl-4 p-2">Simulator</a></li>
            <li><a href="{{url_for('core.portfolio')}}" class="dropdown-item active text-light pl-4 p-2">Portfolio</a></li>
        </ul>
      </li>       
  </ul>

  <br>
  <div class="footer">
      <p>
          Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | <i class="icon-heart" aria-hidden="true"></i> by <a href="#" target="_blank">#</a>
      </p>
  </div>

</nav>

<!-- Container for the body page -->
  <section class="my-container">
   Lorem Ipsum
  </section>

这是css部分：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background-color: #fff;
}

.navbar {
    width: 250px;
    height: 100vh;
    position: fixed;
    margin-left: -300px;
    background-color: #212529;
    transition: 0.4s;
}

.nav-link {
    font-size: 1.25em;
}

.nav-link:active,
.nav-link:focus,
.nav-link:hover {
    background-color: #c0c2c5;
}

.dropdown-menu {
    background-color: #be1ca9;
}

.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover {
    background-color: #a81219;
}

.my-container {
    transition: 0.4s;
}


/* for navbar */

.active-nav {
    margin-left: 0;
}


/* for main section */

.active-cont {
    margin-left: 250px;
}

.footer p {
    color: rgba(255, 255, 255, 0.5); }

如何修复从其容器溢出的定位，如此屏幕截图所示？

Answer 1

像我的后续代码一样更新这两个类属性：

.navbar {
    width: 250px;
    height: 100vh;
    position: fixed;
    background-color: #212529;
    transition: 0.4s;
}

.my-container {
    transition: 0.4s;
    margin-left: 250px;
}