CSS - Is it possible to have overflow scroll using a dynamic height? - css

Question

I have a floating modal shopping cart that sits at the top of my shopping page (metronic theme). The problem I face is that if a user adds too many products, it falls off the bottom of the page.
I thought of two solutions:
Using paging
Using overflow scroll
Overflow scroll seems the most sensible solution although this is the issue:
When I only have 1 product in the cart, I end up with a chunky look due to empty white space below the product, which is not great:
My CSS is as follows:
.cart-content-wrapper{
position: absolute;
right: -2px;
top: 100%;
z-index: 99999;
}
.cart-content {
padding: 8px 0 10px;
background: #fcfafb;
border-top: solid 2px #ea4c1d;
box-shadow: 5px 5px rgba(91, 91, 91, 0.2);
width: 364px;
margin-top: 12px;
color: #717880;
display: none;
position: relative;
overflow: scroll;
overflow-x: hidden;
height: 400px;
transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-webkit-transition: opacity .3s ease-in-out;
}
.cart-content:after {
top: -8px;
width: 0;
height: 0;
right: 8px;
z-index: 2;
content: " ";
display: block;
position: absolute;
border-bottom: 8px solid #e6400c;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
So my question is this:
What is the best way to dynamically re-size the modal so that it does not end up with empty space?

Answer 1

This can be achieved by using the properties min-width and/or max-width:
Let's say you want the height to always be at least 100px tall but never more than 200px:
div {
min-height: 100px;
max-height: 200px;
height: auto; /* Not necessary as it is the default value */
}
Now the div will always be 100px tall unless there is more content, which will stretch the div. When 200px is reached and you want a scrollbar, you can add overflow: auto.