I am facing an issue with my flexbox container in React and Bootstrap. Despite following the correct grid system of container, row, and column, my container is stuck at a fixed height causing the content to run off the page when there are too many elements. I need help figuring out what's causing this problem. Can anyone assist me?
<>
<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 portfolio 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 portfolio 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;
}
To better understand my issue, please refer to the following screenshots: screenshot 1 screenshot 2
The first screenshot shows the layout as intended, but in the second screenshot, you can observe that when there are too many elements added to the container, the height remains unchanged, causing elements to overflow off the page.