How do I place the scrollbar on the sidebar?

Question

How do I place the scrollbar on the sidebar?

I am playing with css grid grids and following this tutorial and was wondering how can I add a scrollbar which, after a certain height of the content, will scroll vertically.

All my attempts so far make the scrollbar, but the bottom arrow turns off.

https://codepen.io/anon/pen/rwLRpJ

<div class="grid-container">
    <div class="grid-element header">Header</div>
    <div class="grid-element sidebar">
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
    </div>
    <div class="grid-element main">
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
    </div>


</div>

body {
  text-align: center;
  font-family: "Dosis";
}

.grid-container {
  display: grid;
  grid-template-columns: 0.25fr 10px 0.75fr;
  grid-template-rows: auto 20px auto 20px auto 20px auto;
  height: 100vh;
}

.grid-element {
  background-color: #444;
  color: #fff;
  padding: 20px;
  font-size: 2em;
}
.header {
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #69F;
}

.sidebar {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 6;
  background: #6F9;
  overflow-y: auto;
}

.main {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  background: #F69;

}

+3

html css css3 grid-layout css-grid

chobo2 June 13. 17 at 17:18

source to share

1 answer

Andrei Gheorghiu · Answer 1 · 2017-06-13T18:00:42+0000

You have not added to , thereby increasing the size to allow access to this "visible" content. For some reason, this causes it to grow in the available space and propagate to the parent height of the full content. overflow-y: auto;

.main

<body>

.grid-container

.sidebar

Also, I added:

body {
  margin: 0;       /* to remove its vertical scrollbar */
}
.main {
  grid-row-end: 6; /* assuming you want it same height as sidebar? */
}

Here's the handle: https://codepen.io/anon/pen/LLZvLE

Clarification: without overloading .main

on auto

, it sets the default visible

. This puts its overflowing content outside the scrollable area of the page from the side bottom

. Unlike content that overflows over the sides top

or left

which does not increase the area of the scrolling image, visible content that overflows over the sides bottom

or right

increases the scrolling area (therefore <body>

) to allow you to access that "visible" content.

This makes the growth <body>

tall. I'm not entirely sure why .grid-container

allowing myself to grow into this created space, because you clearly stated its height as 100vh

, not 100%

. Perhaps this is a bug / feature of the grid. I am still on the grid.

However, setting .main

overflow

to auto

makes the overflow content available and <body>

no longer grows in height, fixing your problem.

As per the comments, here's a simplified grid, removing unnecessary tracks and attributes. If you put it in your head with what you had, I think it makes sense. Of course, you have to split it further if you want markup, but for what you have, this is enough:

body {
  text-align: center;
  font-family: "Dosis";
  margin: 0;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 0fr 1fr;
  height: 100vh;
  padding: 10px 10px 0;
  box-sizing: border-box;
}

.grid-element {
  background-color: #444;
  color: #fff;
  padding: 20px;
  font-size: 2em;
  margin-bottom: 10px;
}
.header {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
  background: #69F;
}

.sidebar {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  background: #6F9;
  overflow-y: auto;
}

.main {
  grid-column-start: 2;
  grid-row-start: 2;
  background: #F69;
  overflow-y: auto;
  margin-left: 10px;
}

<div class="grid-container">
    <div class="grid-element header">Header</div>
    <div class="grid-element sidebar">
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
        <div> test </div>
    </div>
    <div class="grid-element main">
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">
        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
        <div class="input-field">
            <input placeholder="Placeholder" type="text" class="validate">

        </div>
    </div>
</div>

Run code

How do I place the scrollbar on the sidebar?

More articles: