flexbox container wont grow content runs off the page

Question

I am trying to build a simple site using react and bootstrap, but my flexbox container is stuck at a fixed height, and when too many elements are on the page the content runs off. I believe I am following the correct bootstrap grid system container, row, column, but I can seem to find out what's wrong Can someone help me figure out why this is happening?

<>
    <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;
}

here are some screenshots to help better understand what's happening: screenshot 1 screenshot 2

In the first screenshot everything is laid out how I want it, but in the second screenshot when to many elements are added to the container the container height doesn't change, and the elements fall off the page.

Answer 1

You should add flex-wrap next to d-flex