Scrolling only inside flexbox child

Question

I'm a CSS beginner and I'm experimenting with scrolling and flexbox. Here is my current attempt

body {
  margin: 0;
  height: 100vh; 
}

#root {
  height: 100vh; 
  display: flex; 
  flex-direction: column;
}

header, footer {
  min-height: 50px; 
  background-color:blue; 
  flex: 0 0 auto
}

#main-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background-color: grey;
}

#main-panel-header {
  height: 20px;
  width: 100%;
  flex: 0 0 auto;
  background-color: red;
  text-align: center;
}

#main-panel-content {
  background-color: orange;  
  overflow-y: auto;
  flex: 1 1 auto;
}

ul {
  list-style-type: none;
  text-align: center;
  line-height: 100px;
  font-weight: bold;
  font-family: sans-serif;
  font-size: 1em;
  color: green;
}

<div id="root">
  <header id="header">Header</header>
  <div id="main-panel">
    <div id="main-panel-header">Main Panel Header 2</div>
    <div id="main-panel-content">
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
      </ul>
    </div>
  </div>
  <footer id="footer">Footer</footer>
</div>

I'm trying to make main-panel-content scroll, and always keep both headers and the footer visible. Right now, the scrolling happens on the whole page, rather than my main panel content. Since the whole design is flexible, I don't want to use a fixed height for the main panel.

Any tips on how to debug such issues?

min-height:0 to #main-panel and you have a typo in overflow-y — Temani Afif, Jun 19 '21 at 08:34
Thank you for your help! Any pointers as to why `min-height` is necessary? — francoisr, Jun 19 '21 at 08:37

score -1 · Answer 1 · answered Jun 19 '21 at 08:48

-1

You can add below code to #main-panel

overflow-y:scroll;  
display:block;

You Can Find full code : https://codepen.io/chamman01/pen/poeYMwG

Hope you got your Answer

answered Jun 19 '21 at 08:48

Atish Ojha

1
2
2

Thanks, but I want the red header to also be fixed and not scrollable. Setting min-height:0 on the main panel fixes it as suggested in the comments. – francoisr Jun 19 '21 at 08:55

Scrolling only inside flexbox child

1 Answers1