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

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:

enter image description here

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?

Look at min-height, max-height and use it in combination with an overflow: auto;. — Bram Vanroy
– Bram Vanroy, Commented Jan 3, 2015 at 11:06

Bram Vanroy · Accepted Answer · 2015-01-03 11:25:20Z

4

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.

answered Jan 3, 2015 at 11:25

Bram Vanroy

28.9k29 gold badges151 silver badges266 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HappyCoder Over a year ago

Thanks was going to suggest you post it :)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related