I'm attempting to structure one container with 3 rows. The first row contains the header, the last row the footer. In the middle row, I want two columns. The left column should display multiple scrollable cards. I've tried various methods to make the elements fit the 100vh of the container without success. Essentially, I need a scrollbar only in the left column of row 2. Everything should be properly displayed on the screen.
For reference, here is the link to my code: https://codepen.io/PrestigeEis/pen/ExbqWpR
<div class="container-fluid vh-100">
<div class="row" id="row1">
<div class="col-3 border titleCol">DEM Units consumption</div>
<div class="col-9 border titleCol">Detail Page</div>
</div>
<div class="row" id="row2">
<div id="customerList" class="col-3">
<div class="card customerCard">CustomerA</div>
<div class="card customerCard">CustomerB</div>
<div class="card customerCard">CustomerC</div>
<div class="card customerCard">CustomerD</div>
<div class="card customerCard">CustomerE</div>
<div class="card customerCard">CustomerF</div>
<div class="card customerCard">CustomerG</div>
<div class="card customerCard">CustomerH</div>
</div>
<div id="detailPage" class="col-9"></div>
</div>
<div class="row" id="row3">
<div class="col-3 border footerCol"></div>
<div class="col-9 border gap-2 footerCol">
<button type="button" id="safeBtn" class="btn btn-primary">
Save
</button>
<button type="button" id="cancelBtn" class="btn btn-outline-primary">
Cancel
</button>
</div>
</div>
</div>
CSS Style:
html,body, #root {
margin: 0;
height: 100%;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f7f7f7;
}
::-webkit-scrollbar-thumb {
background: #9b9a9a;
}
::-webkit-scrollbar-thumb:hover {
background: #8c8c8c;
}
#customerList {
background-color: #f7f7f7;
overflow-y: scroll;
padding: 0px;
max-height: inherit;
}
#detailPage {
background-color: #f7f7f7;
padding: 0px;
}
.customerCard {
min-height: 150px;
border-radius: 0%;
}
.titleCol {
background-color: #ffffff;
min-height: 45px;
display: flex;
align-items: center;
justify-content: center;
}
.footerCol {
background-color: #ffffff;
min-height: 45px;
display: flex;
align-items: center;
justify-content: end;
}
#safeBtn {
background-color: #0a6cd1;
}
#safeBtn:hover {
background-color: #085caf;
}
#cancelBtn {
color: #085caf;
border-color: white;
}
#cancelBtn:hover {
color: #085caf;
border-color: #085caf;
background-color: #ebf5fe;
}
#row1{
max-height: 10vh;
}
#row2{
max-height: 88.2vh;
}
#row3{
max-height: 10vh;
}