how to fix overflow-y: scroll not working

Question

I was trying to make the items in the .menu-scroll class which is a div of a <ul> list show a scroll bar when it passes its limites of the height, in my case it only keeps pushing down the .menu-footer div and making a huge problem in the page.

body {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: 300px 100px auto 100px;
  grid-template-rows: 50% 50%;
  background-color: gray;
  height: 100vh;
}

.grid>#menu {
  display: grid;
  background-color: blueviolet;
  text-align: center;
  font-size: 30px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2 end;
  grid-template-rows: auto 75px;
}

.grid>#posts-wrapper {
  display: grid;
  background-color: gray;
  text-align: center;
  font-size: 30px;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-template-rows: 50px auto;
  grid-template-columns: auto;
}

#posts {
  background-color: white;
  grid-row-start: 2;
  grid-row-end: 3;
}

.menu-footer {
  background-color: green;
}

.menu-scroll {
  display: grid;
  grid-template-rows: 100px auto;
}

.menu-scroll>.cover {
  background-color: yellow;
}

.menu-scroll>.menu-list {
  position: sticky;
  overflow: scroll;
}

.list-item {
  background-color: tomato;
  padding: 10px 0px;
  margin-top: 5px;
}

<div class="grid" id="container">
  <div class="grid-item" id="menu">
    <div class="menu-scroll">
      <div class="cover">cover</div>
      <div class="menu-list">
        <ul style="list-style: none;">
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
        </ul>
      </div>
    </div>

    <div class="menu-footer">sticky footer</div>

  </div>

  <div class="grid" id="posts-wrapper">
    <div id="posts">
      posts
    </div>
  </div>
</div>

disinfor · Accepted Answer · 2019-11-18 19:09:46Z

It's happening because in your:

.menu-scroll {
  display: grid;
  grid-template-rows: 100px auto;
}

You set every element except for the first one in an auto sizing grid row. So no matter how many items you add to the ul, which is in the second element <div class="menu-list">, it will always grow.

You need to set it up to have an explicit height on the second element.

Like this:

.menu-scroll {
      display: grid;
      grid-template-rows: 100px 300px auto;
    }

body {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: 300px 100px auto 100px;
  grid-template-rows: 50% 50%;
  background-color: gray;
  height: 100vh;
}

.grid>#menu {
  display: grid;
  background-color: blueviolet;
  text-align: center;
  font-size: 30px;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
  grid-row-end: 2 end;
  grid-template-rows: auto 75px;
}

.grid>#posts-wrapper {
  display: grid;
  background-color: gray;
  text-align: center;
  font-size: 30px;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-template-rows: 50px auto;
  grid-template-columns: auto;
}

#posts {
  background-color: white;
  grid-row-start: 2;
  grid-row-end: 3;
}

.menu-footer {
  background-color: green;
}

.menu-scroll {
  display: grid;
  grid-template-rows: 100px 300px auto;
}

.menu-scroll>.cover {
  background-color: yellow;
}

.menu-scroll>.menu-list {
  position: sticky;
  overflow: scroll;
}

.list-item {
  background-color: tomato;
  padding: 10px 0px;
  margin-top: 5px;
}

<div class="grid" id="container">
  <div class="grid-item" id="menu">
    <div class="menu-scroll">
      <div class="cover">cover</div>
      <div class="menu-list">
        <ul style="list-style: none;">
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
          <li class="list-item">menu item</li>
        </ul>
      </div>
    </div>

    <div class="menu-footer">sticky footer</div>

  </div>

  <div class="grid" id="posts-wrapper">
    <div id="posts">
      posts
    </div>
  </div>
</div>

it fixed the scrollbar problem but still it doesnt fit the menu until the footer

Collectives™ on Stack Overflow

how to fix overflow-y: scroll not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related