The vertical overflow feature does not seem to be functioning correctly with the

In the following HTML setup:

<div id="container">
  <header></header>
  <div id="content">
     <div class="something"></div>
     <div class="lateralInfo">
        <div class="menu"></div>
        <div class="data">
             // A lot of data 
        </div>          
     </div>      
  </div>
  <footer></footer>
</div>

And with the corresponding CSS styles applied:

*{
    margin: 0;
    padding: 0;
    border:0;
    box-sizing: border-box;
}

 #container{
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 50px 1fr 10px;
    align-items:stretch;
    justify-items:stretch;
}
#content{
    display: grid;
    grid-template-columns: 1fr 300px;
    background-color:rgb(128, 126, 126);
}
.something{
    position: relative;
    overflow-y:hidden;
    overflow-x:hidden;
    padding:10px;
    margin:30px 0px;
} 
.lateralInfo{
    background-color:#eaeaea;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    height: 100%;
    align-content:flex-start;
    display:grid;
    grid-template-rows: auto 1fr;
}
  .data{
     padding:10px;
     display:grid;
     grid-gap:10px;
     align-content: flex-start;
     overflow-y: scroll;
}

The result is as shown in this https://i.sstatic.net/oIHga.png.


An issue arises when numerous divs are placed within .data, indicated by "HERE" in the image.

.data{
  overflow-y: scroll;
}

The overflow-y property appears to be ineffective. Despite specifying a height for the parent element according to some sources,

I have utilized fr units in all parent elements of .data, which should allocate exactly the necessary space. So, why is it not functioning as anticipated?

Currently, my approach involves:

var contentHeight = $("#content").innerHeight();
$(".lateralInfo").css("height", contentHeight);

To establish a suitable height when the page loads in response to various screen sizes. However, this strategy contradicts the intent of using fr units in CSS.

Hence, why does this discrepancy occur even though fr units are specified for all parent elements? Is there a CSS-only solution available?

Explore the code on JSFiddle here

javascriptjqueryhtmlcss

Answer №1

Takit Isy's CSS solution will ensure that the menu within the lateralInfo scroll properly.

To address this issue, a slight change in the HTML code is necessary.

If you start from your original code, wrap a new div style="position:relative" around the data div and add the following CSS to the .data class:

position:absolute;
height:100%;
width:100%;

Explanation:

The use of fr causes the last child node of lateralInfo to have a minimum height but not a maximum height, which cannot be manually set due to its formulaic nature. This is why the previous solution did not work.

To solve two problems - preventing the last-child element of lateralInfo from growing too large and giving the scrollable element a maximum height - wrapping a new div around data with a position:absolute resolves the first problem (as the new div won't expand with absolute positioning content). The second issue is tackled with height:100% (possible because of the parent element providing the desired height).

Full Code:

<div id="container">
  <header></header>
  <div id="content">
     <div class="something"></div>
     <div class="lateralInfo">
        <div class="menu">menu doesn't scroll away</div>
        <div style="position:relative">
           <div class="data">
              // A lot of data 
           </div>          
        </div>
     </div>      
  </div>
  <footer></footer>
</div>

CSS:

*{
    margin: 0;
    padding: 0;
    border:0;
    box-sizing: border-box;
}

 #container{
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 50px 1fr 10px;
    align-items:stretch;
    justify-items:stretch;
}
#content{
    display: grid;
    grid-template-columns: 1fr 300px;
    background-color:rgb(128, 126, 126);
}
.something{
    position: relative;
    overflow-y:hidden;
    overflow-x:hidden;
    padding:10px;
    margin:30px 0px;
} 
.lateralInfo{
    background-color:#eaeaea;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    height: 100%;
    align-content:flex-start;
    display:grid;
    grid-template-rows: auto 1fr;
}
.data{
     position:absolute;
     height:100%;
     width:100%;
     padding:10px;
     display:grid;
     grid-gap:10px;
     align-content: flex-start;
     overflow-y: scroll;
}

Answer №2

Issue

The current issue is that when using 1fr, it conflicts with the property overflow.

To make overflow work as intended, you need to ensure that the block-level container has a specified height (height or max-height) or white-space set to nowrap.

For more information on overflow, refer to the documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

The fr unit distributes available space flexibly but does not define an actual height.

Solutions

  1. Implement JavaScript Solution

One approach to resolving this issue is through a JavaScript solution:

$(".lateralInfo").css("height", $("#content").innerHeight());
* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

#container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 50px 1fr 10px;
  align-items: stretch;
  justify-items: stretch;
}

#content {
  display: grid;
  grid-template-columns: 1fr 300px;
  background-color: rgb(128, 126, 126);
}
  
/* Additional CSS code for the elements */
...
... more HTML and CSS code ...

(Please note the extra </div> tag at the end of your HTML was removed)

⋅⋅⋅

  1. Apply Absolute or Fixed Positioning in CSS

If avoiding JavaScript is preferred, consider utilizing absolute or fixed positioning within your CSS:

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}
  
/* CSS rules for layout positioning */
...
... additional HTML and CSS content ...

Hope these solutions are helpful in addressing the issue.

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

Automate scrolling to the top of a webpage with Selenium WebDriver using JavaScript

I am utilizing Selenium webdriver with javascript and node.js During a certain step in my test, I need to automate clicking on a button positioned at the top of the page. However, due to some pre-treatment, the page automatically scrolls to the bottom, c ...

javascriptseleniumselenium-webdrivernodes

Creating a paper button in Polymer using JavaScript

Does anyone know how to successfully implement a Polymer paper button using JavaScript? Here is what I have attempted: var newPaperButtonElement = document.createElement('paper-button'); newPaperButtonElement.setAttribute('class',& ...

javascriptpolymerpaper-elements

The issue of array sorting, specifically the function(a, b) {return b.value - a.value), is causing some

I am struggling to retrieve data from firebase and sort them according to the field 'overallScore' in descending order. Despite following suggestions like using array.sort(function(a, b) {return b.value - a.value), I have not been successful in s ...

javascriptfirebasevue.js

Attempting to dynamically change the text of a button in JavaScript without any user interaction

I have created a button function that displays a word's definition when clicked. However, I am now attempting to modify it so that the definitions are shown automatically every few seconds using "SetInterval" without requiring a click. I am unsure of ...

javascriptarrayshtml

Unable to retrieve DOM value due to Vue.js template being inaccessible in Chromium, including from both DevTools and extensions

Currently, I’m developing a Chrome extension that needs to retrieve specific values from a webpage such as the item title. However, instead of fetching the actual title, it is reading a Vue.js template variable. Even when I use DevTools to inspect the p ...

javascripthtmlvue.jsdomgoogle-chrome-devtools

Using moment.js to perform addition of time does not yield the desired outcome

Every time I try to ---- make changes ---- var someMoment = moment('6:30 PM', ["h:mm A"]); ---- end changes ---- someMoment.add(30, 'minutes') I am not getting any desired outcome. console.log(start); -- Moment {_isAMomentObject: ...

javascripttimeadditionmomentjs

Missing inkbar in Material UI tabs when using ReactJS

For some reason, the small inkbar is not appearing under this tab. I suspect it might be a css issue that I can't seem to figure out. It's possible that I'm missing something I don't know about or maybe the height of the tab is too high ...

cssreactjsmaterial-ui

Performing an automated check on user messages every 60 seconds using JQuery and Ajax

I am in the process of developing a website with notification features, and I am looking to implement a script that will check for new messages every 60 seconds. The goal is to pass the user id through the script to trigger an alert (currently using a ba ...

javascriptajaxjquery

How can you create a smooth transition between two images in React Native?

I'm looking to create a cool effect with two images that gradually fade into each other. My initial approach involved layering one image over the other and adjusting its opacity using timing or animation functions, but I've been struggling to ge ...

javascriptreact-native

Delete an element once the ajax request is complete

After closing the modal, I noticed that a div element was left behind causing the screen to become unresponsive. <div class="modal-backdrop fade show"></div> I found that removing this element using the console command below fixed the issue: ...

javascriptjqueryajax

Issue with pop up window causing button click event to malfunction

I am facing an issue where the button click event works fine outside of a pop-up window but does not fire when inside the pop-up window. In my HTML code, the part that calls the button event outside of the pop-up window works perfectly, but inside the pop- ...

javascriptc#jqueryasp.net

It encounters an error when attempting to fetch the 'src' attribute of a class

Is there a way to extract the HTML link found in the src attribute within a specific div on a webpage? The div structure is as follows: <iframe width="100%" class="idemo2" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="some/privat ...

javascriptjqueryhtml

What techniques can I use to change multiple sibling elements with CSS when hovering over them?

Imagine a scenario where hovering over any row within group 1 changes the color of all rows within that same group. Now, extend this concept to apply to an unlimited number of groups, denoted by N. Let's consider having 300 groups, each consisting of ...

htmlcss

What is the correct way to properly wrap the div component in this code snippet?

I am currently working on implementing a Javascript component that displays pinned locations and related information on a map. I have made some progress with the implementation, but unfortunately, it does not appear correctly in the actual site. There is a ...

javascripthtmljquerycssimplementation

What is the best way to retrieve environment variables from an NPM package in an Angular 5 application

Is there a method for my node module, created from an Angular 5 application, to access the environment variable from the Angular 5 application (environments/environment.ts)? Perhaps Angular 5 exports its environment variables to JavaScript global variables ...

javascriptangularnpmnode-modulesangular5

Unable to add dynamically created content after deleting all associated elements

In my code, I have a Select element that generates dynamic HTML below it based on the selected value. Before appending the HTML after the year id, I try to remove all elements with the class quarter, but it seems like it's not working properly. $( ...

jqueryhtmlappend

The length of the array does not correspond to the index position

var index = 0; var length = ["a", "b", "c", "d", "e"].length; var interval = setInterval(function() { if (index < length) { console.log(index); console.log(length); index++; } else { clearInterval(interval); } }, 1000); Is there a solution t ...

javascript

The functionality of the jQuery script is not operating optimally, causing the expected alert to not be displayed

I implemented this jQuery script: $('input[name="add-post"]').on('click', function(form) { form.preventDefault(); for ( instance in CKEDITOR.instances ) CKEDITOR.instances[instance].updateElement(); $.ajax({ typ ...

javascriptphpjqueryajax

Combining Java with Ajax and JSON for effective file separation using paths

I am encountering an issue with a servlet that generates a JSON string containing file paths. The generated string looks like this: {"files": "li_digitalized#C:\Users\FABIO~1.HAE\AppData\Local\Temp\fusion_capture\fscan18 ...

javascriptjqueryajaxjsonfile

getting v-model value updated when clicking button

How can I update the value of v-model DataJournals.Description in a looping data when a button is clicked? This is what I have attempted: template <tr v-for="(DataJournals, index) in DataJournal" :key="DataJournals.value"> <td> & ...

javascriptvue.jsvuejs2vue-component