Kevin Powell - Community•4mo ago

Add a Scrollbar to a Container When Content Exceeds 100% Height Without Setting a Fixed Height?

Hello everyone, I'm working on a responsive layout where I want the .status container to have a scrollbar if its content exceeds the available space. However, I don't want to set a fixed height for the .status container since the layout needs to be flexible and responsive. I'm looking for a solution primarily using HTML and CSS, but I'm open to JavaScript, TypeScript, or Angular solutions if necessary. In this example, each .status container should display a scrollbar if the content exceeds the available height. However, I'm not sure how to achieve this without setting a fixed height. Is there a way to make the .status container handle overflow correctly in this scenario? Here is the code I'm working with: https://jsfiddle.net/nLo0vzgk/7/ In this example, each .status container should display a scrollbar if the content exceeds the available height. However, I'm not sure how to achieve this without setting a fixed height. Is there a way to make the .status container handle overflow correctly in this scenario? Any advice or solutions would be greatly appreciated!

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

6 Replies

Chris Bolson•4mo ago

As you know, for overflow-y to work you really need to define a height. As you don't want to hard-code this in the CSS, you could detect the height using JS on page load and update the DOM with this height. Something like this should work:

// total value of "gaps" defined in CSS (20px + 20px)
const PADDING = 40; 

// get height of top "header" element
const headerHeight = document.querySelector('.content-1').offsetHeight;

// calculate the available height by subtracting the "header" height from the viewport height, taking into account the gaps or margins
const availableHeight = window.innerHeight - headerHeight - PADDING;

// update DOM .status elements with height
document.querySelectorAll('.status').forEach(el => el.style.height = `${availableHeight}px`);

// total value of "gaps" defined in CSS (20px + 20px)
const PADDING = 40; 

// get height of top "header" element
const headerHeight = document.querySelector('.content-1').offsetHeight;

// calculate the available height by subtracting the "header" height from the viewport height, taking into account the gaps or margins
const availableHeight = window.innerHeight - headerHeight - PADDING;

// update DOM .status elements with height
document.querySelectorAll('.status').forEach(el => el.style.height = `${availableHeight}px`);

AbcOP•4mo ago

Thank you so so much 🙏 🙏 🙏 🙏 🙏 🙏 🙏

Chris Bolson•4mo ago

You might want to convert that into a funciton and add an eventlistener on the window incase the user resizes it. Just an idea.

Alex•4mo ago

This sounds like a use for Container Queries and container units. Add/change the following in your code:

.content-2 {
  container-type: size;
}

.status {
  /* remove height:100% rule */
  max-height: 100cqb;
}

.content-2 {
  container-type: size;
}

.status {
  /* remove height:100% rule */
  max-height: 100cqb;
}

Chris Bolson•4mo ago

Interesting! I need to give this a go... WOW!!! that is excellent. It is defiantly time I paid more attention to Container Queries. Thanks! I tend to wait until things hit 90% browser coverage, and most importantly are available on Firefox, before I really start to investigate and use things. I see that container queries are now at 90.97% so it is time! 😆

AbcOP•4mo ago

Thank you. I've heard first time of it.

Gaming

Programming

Add a Scrollbar to a Container When Content Exceeds 100% Height Without Setting a Fixed Height?