flexbox container wont grow content runs off the page

Issue

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.

Solution

You should add flex-wrap next to d-flex

Answered By - Hai Tien