我正在尝试使用 react 和 bootstrap 构建一个简单的站点，但是我的 flexbox 容器被卡在了固定的高度，并且当页面上的元素过多时，内容就会消失。我相信我正在遵循正确的引导网格系统容器、行、列，但我似乎可以找出问题所在 有人可以帮我弄清楚为什么会这样吗？

<>
    <NavBar />
    <div className=" test container-fluid p-0 ">
      <div className="row text-center"> 
        <div className="col p-0">
             {
              numberOfVisitors.length === 0 && 
                <h2 className="p-3 mb-0 bg-dark bg-gradient text-danger">
                  Sorry, the Firestore free tier quota has been met for today. Please come back tomorrow to see portfilio stats.
                </h2>
            }
            {currentNumberOfVisitors}
          </div> 
        </div>
      <Router>
          <div className="bg-image">
            <div className="position-relative">
                <Routes>
                  <Route path="/" element={<Home />} />
                  <Route path="/about" element={<About />} />
                </Routes>
              <div className="row">
                <div className="col">
                  <h4 className="text-dark text-center">Comments</h4>
                </div>
              </div>
              <div className="row">
                <div className="col d-flex justify-content-center">
                  <div className="comments-container" >
                    {
                      userComments.length === 0 && 
                        <h4 className="text-danger bg-dark m-1 p-1">
                          Sorry, the Firestore free tier quota has been met for today. Please come back tomorrow to see portfilio comments.
                        </h4>
                    }
                    {listOfUserComments}
                  </div>
                </div>
              </div>
              <div className="row text-center">
                <div className="col">
                  <h4 className="text-dark">Leave a comment</h4>
                  <h1>something</h1>
                  <h1>something</h1>
                  <h1>something</h1>
                </div>
              </div>
              <div className="row flex-column">  
                <div className="col d-flex justify-content-center">
                  <form className="" style={{ width: "500px"}}>
                    <MDBInput className="text-dark fw-bold" id='form4Example1' wrapperClass='mb-4' label='Name' onChange={(event) => setName(event.target.value)} />
                    <MDBTextArea  className="text-dark fw-bold" label='Comment' id='textAreaExample' rows={4} onChange={(event) => setComment(event.target.value)} />
                    <MDBBtn onClick={addComment} block size="lg">
                      Post Comment
                    </MDBBtn>
                  </form> 
                </div>
              </div>
            </div>
          </div>
        </Router> 
    </div>
    <Footer />
  </>

body 
{
  font-family: Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}
html, body
{
  height: 100% !important;
}

.navbar-nav > li > a:hover  
{
  color: #33b5e5  !important;
}

.bg-dark.text-white.text-center > .text-center.p-3 > .text-white:hover
{
  color: #33b5e5  !important;
}

.bg-image 
{
    height: 100vh;
    background-image: url("./assets/images/bg-image.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.comments-container
{
  width: 500px; 
  border: solid black 1px;
  overflow-y: scroll;
}

以下是一些屏幕截图，可帮助您更好地了解正在发生的事情：https://ibb.co/BBm873whttps://ibb.co/VL3K48T

在第一个屏幕截图中，一切都按照我想要的方式进行了布局，但是在第二个屏幕截图中，当将许多元素添加到容器中时，容器高度不会改变，并且元素会从页面上掉下来。