CSS Grid how do I get overflow-y only on one part of the screen not the entire screen-CodePudding

body, html {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;

}

.container {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto repeat(11, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "t t t t t t t t t t t t"
    "l c c c c c c c c c c c"
    "f f f f f f f f f f f f";
}

.top-menu {
  grid-area: t;
  background-color: red;
}

.left-menu {
  grid-area: l;
  background-color: blue;
}

.content {
  grid-area: c;
  background-color: green;
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  grid-auto-rows: 1fr;

  
}

.content .item {
  background-color: black;
  margin: 25px;
}

.footer {
  grid-area: f;
  background-color: grey;
}tion: absolute;
      background-color: #fff;
      padding-left: 8px;
      pa

dding-right: 8px;
  
}

  <div >
    <div >
     abc
    </div>
    
    <div >
     abc
    </div>
    
    <div >
      <div >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
      <div ></div>
    
    </div>
    
    <div >
     abc
    </div>

  </div>

In the example above. I want the scroll bar to appear only on the .content div not the entire screen as it is right now. Is there a simple fix to the code above to achieve just that? I think it has something to do with removing auto-row 1fr on .content div, but then im unsure how to maintain the 3x3 item boxes.

CodePudding user response：

Use overflow-y: scroll and e.g height: 100vh for .content, Also set a aspect-ratio: 1 / 1 to .item for an equal width and height of items:

body,
html {
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}

.container {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: auto repeat(11, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "t t t t t t t t t t t t" 
                       "l c c c c c c c c c c c"
                       "f f f f f f f f f f f f";
}

.top-menu {
  grid-area: t;
  background-color: red;
}

.left-menu {
  grid-area: l;
  background-color: blue;
}

.content {
  grid-area: c;
  background-color: green;
  display: grid;
  grid-template-columns: 33.3% 33.3% 33.3%;
  height: 100vh;
  overflow-y: scroll;
}

.content .item {
  background-color: black;
  margin: 25px;
  aspect-ratio: 1 / 1;
  color: red;
}

.content .item:first-child {
  overflow: scroll;
  /* or hidden, if you want */
}

.footer {
  grid-area: f;
  background-color: grey;
  background-color: #fff;
  padding-left: 8px;
  padding-right: 8px;
}

<div >
  <div >
    abc
  </div>

  <div >
    abc
  </div>

  <div >
    <div >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>

  </div>

  <div >
    abc
  </div>

</div>

CodePudding user response：

you have to use height on the parent. here is the example that i made for you :

<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body style="background: red">
<div style="height: 400px ; background: black ; display: grid; grid- 
template-columns: 1fr 1fr 1fr 1fr ; gap: 20px ; overflow: auto">
<div style="width: 200px ; height: 200px ; background: aqua">test</div>
<div style="width: 200px ; height: 200px ; background: aqua">test</div>
<div style="width: 200px ; height: 200px ; background: aqua">test</div>
<div style="width: 200px ; height: 200px ; background: aqua">test</div>
<div style="width: 200px ; height: 200px ; background: aqua">test</div>
<div style="width: 200px ; height: 200px ; background: aqua">test</div>
<div style="width: 200px ; height: 200px ; background: aqua">test</div>
<div style="width: 200px ; height: 200px ; background: aqua">test</div>
<div style="width: 200px ; height: 200px ; background: aqua">test</div>
<div style="width: 200px ; height: 200px ; background: aqua">test</div>
<div style="width: 200px ; height: 200px ; background: aqua">test</div>
</div>
</body>
</html>

p.s: this code has an inline style just for test. do not try to use the inline style in your project