Scrolling up and down within a container of several div elements

Seeking help in creating a scrollable file tree. See the simplified code snippet provided below.

https://jsfiddle.net/3kLmchot/1/

An issue arises when attempting to apply overflow-y: scroll; to the filebrowse-outer div, as the initial items become completely invisible. This problem worsens with the addition of more divs.

It appears that items are being placed around the center of the filebrowse-outer div, causing those at the bottom to be accessible via scrolling while those at the top remain hidden (refer to the visual representation below).


item 1
item 2
center of the div
item 3
item 4

The scroll bar starts appearing around item 2, resulting in item 1 disappearing from view. Can anyone shed light on why this is happening and offer potential solutions?

htmlcss

Answer №1

After some tinkering, I managed to make it work by adjusting the styles. I specifically removed justify-content: center; from the general .flex-container class that is used by multiple divs, and instead applied it only to the one related to .flex-container.filebrowse-inner.

.side-bar {
  position: fixed;
    width: 20%;
    height: 200px;
    display: flex;
    flex-direction: column;
}

.flex-container {
    display: flex;
/*   justify-content: center;  <-- THIS LINE IS CAUSING THE ISSUE */ 
  align-items: center;
}

.flex-container.filebrowse-outer {
    flex-direction: column;
    border: 1px solid #f00;
    overflow-y: scroll;
    align-items: stretch;
}

.flex-container.filebrowse-inner {
    flex-direction: row;
    justify-content: center;
    width: 100%;
    padding-bottom: 15px;
    text-align: left;
    position: relative;
}

/* .display-container {
  width: 70%;
  overflow: auto;   
} */

Answer №2

It appears that you intended to add a scroll bar to the external div with the 'side-bar' class, if so:

.side-bar {
  position: fixed;
  width: 20%;
  height: 200px;
  display: flex;
  flex-direction: column;
  overflow-y:scroll;
}

.flex-container {
display: flex;
justify-content: center;
align-items: center;
}

.flex-container.filebrowse-outer {
flex-direction: column;
border: solid;
    min-height: max-content; /* For safari*/
/* overflow-y: scroll; */
align-items: stretch;
}

.flex-container.filebrowse-inner {
flex-direction: row;
width: 100%;
    min-height: max-content; /* For safari*/
padding-bottom: 15px;
text-align: left;
position: relative;
}

.display-container {
width: 70%;
overflow: auto;
}
<div class="side-bar">
  <div class="flex-container filebrowse-outer">
    <div class="flex-container filebrowse-inner>
      <div class="display">
        <p>Click Me 1!</p>
      </div>
    </div>
    <div class="flex-container filebrowse-inner">
      <div class="display">
        <p>Click Me 2!</p>
      </div>
    </div>
    <div class="flex-container filebrowse-inner">
      <div class="display">
        <p>Click Me 3!</p>
      </div>
    </div>
    <div class="flex-container filebrowse-inner">
      <div class="display">
        <p>Click Me 4!</p>
      </div>
    </div>
  </div>
</div>

You can then place the border on the 'side-bar' class instead.

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

Sophisticated filter - Conceal Ancestry

Check out this snippet of my HTML: <td> <a class="button" href="#"> <input id="download">...</input> </a> <a class="button" href="#"> <input id="downloadcsv">...</input> </a> </td> I am ...

javascriptcss

Fan Animation in CSS

I have three unique images that I would like to animate in a fan-like manner consecutively. I prefer not to merge the images in Photoshop, as I want them to be displayed one after the other. Here is the code snippet (dummy images are used): .bannerimg ...

javascriptjqueryhtmlcss

Is there a way to locate classes containing underscores within them using Selenium?

Having trouble scraping a webpage with a class name containing an underscore, specifically this element: <span class="s-item__time-left">30m</span> == $0 I attempted to locate it by class name: time = driver.find_elements_class_name("s-item_ ...

pythonhtmlseleniumweb-scrapingelement

Preventing a webpage's CSS from affecting an iframe loading an HTML document

Whenever I load an iframe, it seems to change a bit. Do I need to apply some kind of reset or adjustment? How can I ensure that the content within the iframe looks consistent no matter what page it's loaded into? ...

javascripthtmlcssiframe

Creating a carousel of cards using JavaScript, CSS, and HTML

Here is a visual reference of what I'm attempting to achieve: https://i.stack.imgur.com/EoQYV.png I've been working on creating a carousel with cards, but I'm struggling to synchronize the button indicators with card advancement when clicke ...

javascripthtmlcsscarousel

Guide to Automatically Transform Markdown (.md) to HTML and Display it within a Designated <div> Container using Node.js alongside markdown-it Library

I am currently working on a unique project where my client specifically requires the ability to input Markdown (MD) content into a .md file and have it dynamically converted into HTML. The resulting HTML must then be displayed within a designated element i ...

javascripthtmlnode.jsnpmmarkdown

The synergy between HTML and JavaScript: A beginner's guide to frontend coding

I have primarily focused on server-side development of enterprise applications (Java EE, Spring framework). However, I am now exploring client-side technologies for better understanding (not necessarily to become an expert). I have studied HTML and CSS th ...

javascripthtmlcss

Detecting collisions in jQuery with simulated interactions

Hey guys, I've encountered a bit of an interesting dilemma. I've been tasked with ensuring that the footer on a certain website never overlaps with the side nav. This issue tends to arise on smaller resolutions, although not quite small enough t ...

jqueryhtmlcollision-detection

What is the best way to position multiple elements within mat-card-content using Angular, CSS, and HTML

I have been attempting to align the button vertically within the mat-card-content, but without success. The title is currently left-aligned and centered vertically as desired. When I make changes to my HTML or add more divs, the alignment gets worse. http ...

htmlcssangularangular-materialstyling

Need assistance with CSS: The div:hover~div selector isn't functioning properly for a div that appears later in

Check out this example page Apologies for the unclear title, let me clarify the issue here. The webpage consists of two identical dividers. When I hover over the left divider, I want the opacity to change and simultaneously affect the second divider as w ...

csshtmlhoveropacity

Using Jquery to toggle a class on click, and dynamically change based on the screen size

I am trying to figure out how to toggle a CSS class on an element by clicking on a div using jQuery. I know how to do it, but I also want the toggle to only happen when the screen size is less than 800px. I'm not very familiar with JavaScript, so I co ...

jquerycssscreen

Issue with Tailwind CSS table header alignment not properly aligning to the right

Currently, I am facing an issue with tailwindcss where the headers in my table are not following the text-right / text-left / text-center directives. If you want to see the problem yourself, here's a link to the fiddle: https://jsfiddle.net/3u2jgqoc/ ...

htmlcsstailwind-csstext-alignment

Hover background color not being applied to child elements within Button element in Firefox

Ensuring that my product is SEO-friendly, I incorporated semantic markup using the button element and schema attributes. To separate individual items, I utilized "span" elements while setting hover effects on selected items by adding display:block. This a ...

htmlcssbuttonhover

Dealing with text overflow within a column and ensuring that the text always expands horizontally to align with the column width

I have implemented a file input feature that displays the selected file's name in a column. However, when the file name is too long, it expands vertically which causes readability issues. There is an option to force the text to expand horizontally, b ...

htmlcssangulartypescriptoverflow

Enhancing the internal styling of ngx-charts

While working on the ngx-charts Advanced Pie Chart example, I noticed that the numbers in my legend were getting cut off. Upon inspecting the CSS, I discovered that a margin-top of -6px was causing this issue: https://i.stack.imgur.com/oSho1.png After so ...

htmlcssangularngx-charts

Resize a container to match the height of either its children or the full height of the window

I'm seeking advice on how to properly use height: 100%. Is there a way to scale a div based on the height of the window and its content simultaneously? I want one to override the other if necessary. Here's an example of standard height 100% css ...

htmlcss

The request returned a 404 (Not Found) error message when trying to navigate using AngularJS

Currently, I am working on building a straightforward application using Ionic and Angular. To test my progress locally, I have set up a simple server by running Ionics ionic serve command. Below is the snippet of my playlist.html code, where I intend to s ...

javascripthtmlangularjsvideohttp-status-code-404

Angular ng-grid is not utilizing its maxWidth property

In my quest to make an angular ng-grid element with autosizing properties, I stumbled upon this code snippet: for (var i = 0; i < $scope.dates.length; i++) { var dateElement = { field: 'reportMap.' + $scope. ...

cssangularjsng-grid

Can you share with me the XPath to locate Discord's input box?

My goal is to utilize Selenium to send messages on Discord, but I am struggling to locate the correct XPath for the input box. I have experimented with XPaths like '/html/body/div[1]/div[2]/div/div[2]/div/div[1]/div/div[2]/div[3]/div[2]/main/form/div ...

htmlseleniumxpath

Ensure that the browser is instructed to utilize a designated Accept field within the HTTP request

Can a web browser be directed to use a specific mime-type in an HTML request? For example, can we achieve this with the following code: <a type="application/pdf" href="https://url.com/">PDF</a> or <a type="text/html ...

htmlhttpwebmime-types