Kevin Powell - Community•8mo ago

Need Help Making Inner Div Scrollable without Explicit Height

Hey folks!, I'm currently working on a project and could use some CSS expertise. I'm trying to create a layout where the header and footer take up auto height, while the main content area fills the remaining space. Additionally, I'd like the main content area to be scrollable if its content exceeds the viewport height. Here's a brief overview of what I'm trying to achieve: - Header and footer should have auto height. - Main content area should fill the remaining space and be scrollable if needed. I've tried using CSS Flexbox and Grid, but I'm running into an issue where the scrollbar appears on the body itself rather than just the main div. Code Pen: https://codepen.io/Gaurav-Kuma-R/pen/xxevyJm If anyone has experience with this or knows a workaround, I'd really appreciate your help! Thanks a bunch for any assistance you can offer! 🙏

Gaurav Kumar

CodePen

xxevyJm

...

3 Replies

Jochem•8mo ago

@GauravKumar1502 please don't @ people to draw them into your thread, it's explicitly mentioned in the #📝rules that you shouldn't @ people unnecessarily

EIO•8mo ago

.main-container {
  display: flex;
  flex-direction: column;
  max-height: 100svh;
  margin: 0px;
}

.main-content {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}

.main-container {
  display: flex;
  flex-direction: column;
  max-height: 100svh;
  margin: 0px;
}

.main-content {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}

GauravKumar1502OP•8mo ago

Sorry for the inconvenience caused by mentioning individuals earlier. I've edited my question to remove the unnecessary mentions.

Gaming

Programming

Need Help Making Inner Div Scrollable without Explicit Height