Troubulating with overflow-y: scroll functionality? Follow these steps to troubleshoot

I've been working on a project involving the .menu-scroll class, which is a div within a <ul> list. I want this div to display a scroll bar when it exceeds its height limit. However, instead of achieving this, it keeps pushing down the .menu-footer div, causing a major layout issue on 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>

htmlcss

Answer №1

The situation is occurring because within your code:

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

You have set all elements except the first one in an auto sizing grid row. Therefore, no matter how many items you add to the ul within the second element <div class="menu-list">, it will always expand.

To address this issue, you must specify a height for the second element.

For example:

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can anyone share tips on how to effectively center navbar link items with Bootstrap?

I recently tried to center the navigation links on my website using Bootstrap. I followed the instructions on the w3schools documentation and also watched a YouTube video for additional guidance. Both resources suggested adding the justify-content-center c ...

htmltwitter-bootstrapbootstrap-5

Is it possible to incorporate a foreach loop while also implementing unique adjustments at specific locations within the code?

I have been searching for a solution to this problem on various forums, but I couldn't find one that fits my needs. My challenge is to create a foreach loop for 12 elements, with 3 of them having a different class applied to them. This is the code I ...

phphtmlmysqlarrays

Easier JavaScript for numerous HTML elements

I am an aspiring JavaScript learner seeking advice. Currently, I am working on a website that features numerous items with multiple images for each. I am utilizing JQuery to display a larger image when the user hovers over a thumbnail image. My query is ...

javascriptjqueryhtml

Drag and drop surprise: When items are dragged onto the screen, a magical box will appear. But watch as the box disappears when the item is dragged

I am a newcomer to knockout JavaScript and am currently utilizing Knockout drag and drop functionality in my project. Initially, I have two divisions - one is visible while the other has a display property set to none. During the drag enter function, I wan ...

jqueryhtmlcssknockout.js

The <Span> element appears as bold in Internet Explorer when placed inside a table, whereas it appears as regular text in Google

I've successfully coded 5 dabbles, utilizing divs for precise positioning. Upon inspection in Chrome and IE, I noticed that the text appears bold in IE, unlike Chrome where it looks normal. To address this difference, I incorporated the <span> a ...

htmlgoogle-chromeinternet-explorerhtml-table

Sharing CSS styles among multiple single-page applications (SPAs) developed using the React

I am currently working on multiple micro SPAs that exist independently within an Express environment. I am facing a challenge with importing a global CSS file that is located outside of the apps, as it is not being recognized. The use of @import url(asset ...

javascriptcssreactjsexpress

Exploring HTML for a specific value using Swift

My journey into learning Swift and Xcode began with a simple project. I decided to work on a project that involved finding a specific value on a website. After successfully retrieving the HTML code, my next step is to isolate and extract the exact value I ...

htmlswiftxcodeparsing

V5 Modal & jQuery: troubleshooting the spinner problem during loading of content

I'm working on displaying a spinner while loading modal content with the use of bootstrap v5 modal and jQuery. However, I encountered some issues in my example. The spinner does not display again after closing the modal; it only shows for the first t ...

javascriptjquerycsssassbootstrap-5

Angular: Autocomplete field automatically shifts focus when an item is removed

I am currently working on an Angular 2 application that utilizes PrimeNG components. One of the UI features includes an autocomplete component with multi-select functionality (p-autoComplete) similar to the one showcased in the official documentation: < ...

javascriptcssangularautocompleteprimeng

Using JavaScript to toggle the visibility of grids depending on the radio button choice and then triggering this action by clicking on the search button

As a newcomer to AngularJS development, I am encountering some challenges while attempting to implement the following scenario. Any suggestions or guidance would be greatly appreciated. I aim to showcase either one or two Angular UI grids based on the rad ...

javascripthtmlangularjsangular-ui-grid

Card carousel rotation

Apologies for the vague title, I'm unsure how to properly label my issue. I have a section set up with cards, but I'm aiming to create something resembling a menu that functions like a carousel. Essentially, I want to include right and left arro ...

jquerycsshtmlbootstrap-4

The quickForm Meteor encountered an exception in the template helper: There was an error stating that Recipes is not within the window

I'm having trouble getting the app to work on Meteor. The quickform is not connecting to my Collection. "Error: Recipes is not in the window scope" Can anyone offer assistance with this issue? Below is my quickform code: <template name="NewRe ...

javascripthtmlmeteormeteor-blazemeteor-autoform

An unexpected identifier error occurred following an Ajax request

Below is the HTML code that I am working with: <div id="texttheory" class="centertext">'. $short .' </div>'; <button id="thbutton" class="theory_button" onclick="javascript:changetheory('.$long.')"> <im ...

javascriptphphtmlajax

Reset the input field upon button press

Is there a way to clear the input field after pressing the button? <div class="form-group autocomplete"> <div class="input-group search"> <input id="search" name="searchterm" type="search" class="form-control form-control search-input" pl ...

javascripthtmlbutton

The functionality of the jQuery .click method appears to be malfunctioning within the Bootstrap

It seems like my JQuery.click event is not functioning as expected when paired with the corresponding button. Any ideas on what might be causing this issue? Here's the HTML CODE snippet: <button id="jan7" type="button" class="btn btn-dark btn-sm"& ...

javascriptjqueryhtmlcssbootstrap-4

When Socket.emit is called, it outputs <span> elements within a well-structured message

Currently working on a small chat application using Node.js, Express.js, and Socket.IO. However, I'm encountering an issue with formatting. Instead of displaying the message content within <span> tags as intended, it is printing out the actual t ...

javascripthtmlnode.jssocket.io

What is the best way to pass a CSS root constant to a separate CSS file?

In my Angular test project, I'm experimenting with using the same colors repeatedly. To achieve this, I created a constants.css file where I defined all my root constants, which currently consist of colors. However, I've hit a roadblock when atte ...

cssangular

execute numerous Jssor Caption instances simultaneously

I have a Jssor slider and I want to create an animation for the first slide. My goal is to make two images come from the sides and merge in the center. I tried using a div for each image with a caption, and it works well. However, the second image starts ...

javascriptjquerycssjssor

What is the best way to show HTML code on a REACT website without disrupting the existing styles?

I am trying to showcase the following code in a REACT webpage, but it is not displaying as code. Instead, it is showing as actual elements. How can I display the button codes below as actual code? <code> <pre> <Button className='btn-grv ...

htmlcssreactjs

Launching Android Calendar app using Intent from a web browser (Chrome)

Did you know that you can use HTML links to open Android apps from within Chrome? Take a look at this resource. If you're trying to open the calendar app from an Android app, the intent should be content://com.android.calendar/time. Learn more about ...

androidhtmlgoogle-chromeandroid-intentcalendar