Vertical scroll bar in div which is a child of css grid column
20,428
Solution 1
One solution would be to set overflow-y:auto
on the parent ( .fieldTypes
) and overflow-y:scroll
on .fieldsContainer
There is no ' story ' behind this. Just that you have to set a default overflow for the parent to accept it, and then specify overflow-y:scroll( as you want vertical scroll ) on the child.
html,body,
.wrapper{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.wrapper{
display: grid;
grid-template-rows: 50px 1fr 50px;
}
.header{
border: 1px solid #ddd;
background: lightyellow;
}
.footer{
background: lightpink;
}
.content{
display: grid;
grid-template-columns: 250px 1fr 300px;
grid-gap: 10px;
overflow: hidden;
}
.fieldTypes{
display: grid;
grid-template-rows: 40px 1fr;
overflow-y:auto;/*added*/
}
.fieldTypes .search{
border: 1px solid red;
}
.fieldTypes .fieldsContainer{
display: grid;
grid-template-columns: repeat(3, minmax(70px,1fr));
grid-auto-rows: 50px;
grid-gap: 10px;
overflow-y:scroll;/*added*/
}
.card{
padding: 10px;
background: #ddd;
}
<div class="wrapper">
<div class="header">
Header
</div>
<div class="content">
<div class="fieldTypes">
<div class="search">search</div>
<div class="fieldsContainer">
<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>
<div class="card">5</div>
<div class="card">6</div>
<div class="card">7</div>
<div class="card">8</div>
<div class="card">9</div>
<div class="card">10</div>
<div class="card">11</div>
<div class="card">12</div>
<div class="card">10</div>
<div class="card">11</div>
<div class="card">12</div>
<div class="card">10</div>
<div class="card">11</div>
<div class="card">12</div>
</div>
</div>
<div class="inndercontent">
innder content
</div>
<div class="graphs">
graphs
</div>
</div>
<div class="footer">
Footer
</div>
</div>
Solution 2
Here's a more reduced case (to cut through the irrelevant parts)
html, body, .A {
height: 100%; /* matters */
width: 100%;
margin: 0;
padding: 0;
}
.A {
max-height: 300px; /* matters */
display: grid; /* matters */
overflow: hidden; /* matters */
}
.B {
display: grid; /* matters */
overflow-y: auto; /* matters */
}
.D {
overflow-y: scroll; /* matters */
}
.C {
padding: 10px;
background-color: #07f;
}
.E {
padding: 10px;
background-color: #eee;
}
<div class="A">
<div class="B">
<div class="C">search</div>
<div class="D">
<div class="E">1</div>
<div class="E">2</div>
<div class="E">3</div>
<div class="E">4</div>
<div class="E">5</div>
<div class="E">6</div>
<div class="E">7</div>
<div class="E">8</div>
<div class="E">9</div>
<div class="E">10</div>
<div class="E">11</div>
<div class="E">12</div>
<div class="E">10</div>
<div class="E">11</div>
<div class="E">12</div>
<div class="E">10</div>
<div class="E">11</div>
<div class="E">12</div>
</div>
</div>
</div>
Solution 3
Set the parent's height to 100vh
. Then overflow-y: scroll
will work on the children.
See this example (based on the reduced case answer).
html, body, .A {
margin: 0;
padding: 0;
}
.A {
height: 100vh; /* matters */
display: grid; /* matters */
}
.B {
padding: 10px;
background-color: #07f;
}
.C {
overflow-y: scroll; /* matters */
}
.D {
padding: 10px;
background-color: #eee;
}
<div class="A">
<div class="B">search</div>
<div class="C">
<div class="D">1</div>
<div class="D">2</div>
<div class="D">3</div>
<div class="D">4</div>
<div class="D">5</div>
<div class="D">6</div>
<div class="D">7</div>
<div class="D">8</div>
<div class="D">9</div>
<div class="D">10</div>
<div class="D">11</div>
<div class="D">12</div>
<div class="D">10</div>
<div class="D">11</div>
<div class="D">12</div>
<div class="D">10</div>
<div class="D">11</div>
<div class="D">12</div>
</div>
</div>
![Saravanan Ramupillai](https://lh4.googleusercontent.com/-mcFZfI0qUcY/AAAAAAAAAAI/AAAAAAAAATk/s8nmV4DmSmo/photo.jpg?sz=256)
Author by
Saravanan Ramupillai
Updated on July 05, 2022Comments
-
Saravanan Ramupillai almost 2 years
I am new to CSS grid, I have a nested grid layout page. I could not get a scroll bar for grid child
div.fieldsContainer
.html,body, .wrapper{ height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } .wrapper{ display: grid; grid-template-rows: 50px 1fr 50px; } .header{ border: 1px solid #ddd; background: lightyellow; } .footer{ background: lightpink; } .content{ display: grid; grid-template-columns: 250px 1fr 300px; grid-gap: 10px; overflow: hidden; } .fieldTypes{ display: grid; grid-template-rows: 40px 1fr; } .fieldTypes .search{ border: 1px solid red; } .fieldTypes .fieldsContainer{ display: grid; grid-template-columns: repeat(3, minmax(70px,1fr)); grid-auto-rows: 50px; grid-gap: 10px; } .card{ padding: 10px; background: #ddd; }
<div class="wrapper"> <div class="header"> Header </div> <div class="content"> <div class="fieldTypes"> <div class="search">search</div> <div class="fieldsContainer"> <div class="card">1</div> <div class="card">2</div> <div class="card">3</div> <div class="card">4</div> <div class="card">5</div> <div class="card">6</div> <div class="card">7</div> <div class="card">8</div> <div class="card">9</div> <div class="card">10</div> <div class="card">11</div> <div class="card">12</div> <div class="card">10</div> <div class="card">11</div> <div class="card">12</div> <div class="card">10</div> <div class="card">11</div> <div class="card">12</div> </div> </div> <div class="inndercontent"> innder content </div> <div class="graphs"> graphs </div> </div> <div class="footer"> Footer </div> </div>
-
Saravanan Ramupillai over 6 yearsThanks, But it will useful to me if you share the story behind this working code. So that it will help me out in future.
-
Mihai T over 6 years@SaravananRamupillai There is no ' story ' behind this. Just that you have to set a default overflow for the parent to accept it, and then specify overflow-y:scroll( as you want vertical scroll ) on the child. More information you can find on the web by looking into overflow css style
-
actinidia over 3 years@MihaiT Why isn't
overflow-y: scroll
on the child sufficient? Why do we need aoverflow-y: auto
on the parent? -
rm.rf.etc about 2 yearsThis solved the issue for me. Would recommend this as the accepted answer.