Here's a link to the fiddle: check it out
Take a look at a normal card below:
https://i.sstatic.net/7Yqqv.png
But when the browser window is resized, it shrinks to this:
https://i.sstatic.net/1aexK.png
This is the HTML structure:
#product-list {
overflow-y : scroll !important;
height: 100%;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<body class="bg-faded h-100">
<!--This is where we insert the tabs-->
<div id="current-tab" style="" class="h-100 fixed-top">
<div class="container-fluid d-flex flex-row m-0 p-0 h-100 w-100">
<div id="products"
class="bg-white d-flex flex-column">
<!--Product List-->
<div id="product-list"
class="card-deck p-4 bg-light">
<!--Product card-->
<div class="card mb-3">
<img class="card-img-top"
src="https://cbp.s3.amazonaws.com/img/0/0/4/8/4/5/tn050016-the-national-trouble-will-find-me-2x12-vinyl-g-3.png"
alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item "><b class="pl-0 pr-5">Price</b>₱200.00</li>
<li class="list-group-item"><b class="pl-0 pr-3">Quantity</b> 19</li>
</ul>
<div class="card-footer d-flex border-top-0 pl-4 pr-4">
<a href="#"
id="edit-product-button"
class="btn btn-outline-primary ml-auto w-50 mr-3">Modify</a>
<a href="#"
id="delete-product-button"
class="btn btn-outline-danger mr-auto w-50">Delete</a>
</div>
</div>
</div>
</div>
</div>
The entire application has a position: fixed, but I needed #product-list to be scrollable so I added this CSS:
#product-list {
overflow-y : scroll !important;
height: 100%;
}
This project uses Bootstrap 4.0.0 beta and is optimized for Chrome.