make grid child scrollable when it's content is overflown

Question

I'm trying to make the div with the class side-panel-content scrollable when it's content is big, overflow-y: scroll; doesn't work in this case.

The idea here, is to make the full page take the viewport, which works when the .long-content div has no height, but if it has a long height this shouldn't make it's container to grow more, and should be scrollable instead.

Here is a full example:

html, body {
  height: 100%;
}

.main {
      height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}
header, footer {
  height: 80px;
  background-color: yellow;
}
.content-wrapper {
  height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}
.title {
  padding: 24px;
  width: 100%;
}
.main-content {
  width: 100%;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 350px;
  justify-content: space-around;
}

.main-panel {
  display: grid;
   grid-template-rows: auto 1fr;
   border: 2px solid red;
}

.side-panel {
  height: 100%;
    width: 100%;
}

.side-panel-wrapper {
    height: 100%;
    background: #f8f9fa;
    box-shadow: 0px 4px 10px rgb(0 0 0 / 10%);
    display: grid;
    grid-template-rows: auto 1fr;
}

.side-panel-header {
  background-color: #ffffff;
    padding: 24px;
    border-bottom: 2px solid #e6e9f0;
}

.side-panel-content {
  overflow-y: scroll;
}

.long-content {
  height: 3000px;
}

<html>
<body>
 <div class="main">
   <header><h1>Header</h1></header>
   <div class="content">
    <div class="content-wrapper">
       <div class="title">
         <h1>Title</h1>
       </div>
       <div class="main-content">
         <div class="main-panel">
           <div>
             <h2>
               Main panel title
             </h2>
             <p>
             Main panel content
             </p>
           </div>
         </div>
         <div class="side-panel">
           <div class="side-panel-wrapper">
             <div class="side-panel-header">
               Side panel header
             </div>
             <div class="side-panel-content">
               <div class="long-content">
                 long content
               </div>
             </div>
           </div>
         </div>
       </div>
    </div>
   </div>
   <footer><h1>Footer</h1></footer>
 </div>
</body>
</html>

Please post a working [repro] in the question itself instead of linking to a fiddle. Questions must be self-containing and should not rely on external resources. A fiddle are only acceptable as add-on. — tacoshy, Jul 07 '22 at 17:11
I think if you set a max-height on the .side-panel-content and then let .long-content just be as long as it needs to be it should work. — Magalie Chetrit, Jul 07 '22 at 17:13
The issue is `height: 100%`. `height: 100%` means 100% of the parent's height. However, the parent's height is `undefined` and calculated to fit-content. 100% of undefined is still undefined. — tacoshy, Jul 07 '22 at 17:14
@MagalieChetrit if I use `max-height` it would be a hard-coded value which I don't want to do, if you remove the `height` for `.long-content` you can see that it takes the full available height, but when it's content is long it doesn't anymore, that's why I want it to be scrollable. — Renaud is Not Bill Gates, Jul 07 '22 at 17:16
you have to define the height somehow. Otherwise it will not be working. As said the height will then be calculated to fit-content. Means it technically can't overflow. — tacoshy, Jul 07 '22 at 17:18
@tacoshy I have body height defined as 100% isn't this enough? the idea here is to always to fit the whole page in the viewport — Renaud is Not Bill Gates, Jul 07 '22 at 17:19
Related? https://stackoverflow.com/questions/34194042/one-flex-grid-item-sets-the-size-limit-for-siblings?r=SearchResults&s=13%7C24.2399 — Paulie_D, Jul 07 '22 at 17:20
if you set the body to 100% then the same rule applies again. 100% height = 100% height of the parent element which then would be HTML. if you want 100% of the viewports height, use 100vh. That would be a specific height that would allow 100% to work. — tacoshy, Jul 07 '22 at 17:23
Works for CSS-Grid too, hence the title of the linked question. — Paulie_D, Jul 07 '22 at 18:42

score 0 · Answer 1 · answered Jul 08 '22 at 07:36

The solution for this is to use an absolute positioning for the child div that has a long height.

html, body {
  height: 100%;
}

.main {
      height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}
header, footer {
  height: 80px;
  background-color: yellow;
}
.content-wrapper {
  height: 100%;
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
}
.title {
  padding: 24px;
  width: 100%;
}
.main-content {
  width: 100%;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr 350px;
  justify-content: space-around;
}

.main-panel {
  display: grid;
   grid-template-rows: auto 1fr;
   border: 2px solid red;
}

.side-panel {
  height: 100%;
    width: 100%;
}

.side-panel-wrapper {
    height: 100%;
    background: #f8f9fa;
    box-shadow: 0px 4px 10px rgb(0 0 0 / 10%);
    display: grid;
    grid-template-rows: auto 1fr;
}

.side-panel-header {
  background-color: #ffffff;
    padding: 24px;
    border-bottom: 2px solid #e6e9f0;
}

.side-panel-content {
  overflow: auto;
  position: relative;
  height: 100%;
}


.long-content {
 position: absolute;
 top: 0;
  height: 3000px;
}

<html>
<body>
 <div class="main">
   <header><h1>Header</h1></header>
   <div class="content">
    <div class="content-wrapper">
       <div class="title">
         <h1>Title</h1>
       </div>
       <div class="main-content">
         <div class="main-panel">
           <div>
             <h2>
               Main panel title
             </h2>
             <p>
             Main panel content
             </p>
           </div>
         </div>
         <div class="side-panel">
           <div class="side-panel-wrapper">
             <div class="side-panel-header">
               Side panel header
             </div>
             <div class="side-panel-content">
               <div class="long-content">
                 long content
               </div>
             </div>
           </div>
         </div>
       </div>
    </div>
   </div>
   <footer><h1>Footer</h1></footer>
 </div>
</body>
</html>

make grid child scrollable when it's content is overflown

1 Answers1