problem with horizontally scrolling container using flexbox

Currently, I am utilizing flexbox css to create a container with multiple div elements that should scroll horizontally. However, I am encountering an issue where adding more divs causes the container to shift to the left, resulting in some of the divs being hidden from view.

I'm puzzled by this behavior and would appreciate any insights. Here is the code snippet along with a link to the CodePen.


.scroll{
  display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: space-evenly;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.item{
  flex: 0 0 auto;
  background: #e4e4e4;
  width: 150px;
  height: 150px;
  margin: 10px;
}
<div class="scroll">
  <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div> <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div>
   <div class="item">
  </div> <div class="item">
  </div>
</div>


Thank you

htmlcssflexboxhorizontal-scrolling

Answer №1

An issue arises when certain justify-content values cause the overflow distribution to extend beyond the boundaries of the flex parent on both sides.

To address this, a new keyword called safe has been introduced to control how the overflow behaves in such situations.

Since this addition is relatively recent in the Flexbox model, it may not be universally supported across browsers just yet, similar to the space-evenly value.

Once browser support improves, using the following CSS line will help resolve the issue:

justify-content: space-evenly safe;

A potential workaround to achieve evenly spaced items within the parent container, while ensuring they only overflow at the right edge if there are too many items, is by utilizing auto margins.

Check out the stack snippet below:

.scroll{
  display: flex;
  /*flex-wrap: nowrap;                   this is the default, can be removed  */ 
   overflow-x: auto;
  /*justify-content: space-evenly;       removed  */
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
.item{
  flex: 0 0 auto;
  background: #e4e4e4;
  width: 150px;
  height: 75px;
  margin: 10px;
}

.item{
  margin-left: auto;                  /* added  */
}
.item:last-child{
  margin-right: auto;                 /* added  */
}
If there are Too many items:
<div class="scroll">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  ...
</div>

If there are Too few items:
<div class="scroll">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Answer №2

Get rid of the justify-content: space-evenly; property in the .scroll class.

Example:

.scroll{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.item{
    flex:  0 0 auto;
    background: #e4e4e4;
    width: 150px;
    height: 150px;
    margin: 10px;
}
<div class="scroll">
  <div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div><div class="item">
  </div>
</div>

This adjustment will prevent the elements from extending beyond the designated boundaries on both ends.
By removing the justify-content: space-evenly; property, all div elements will now be displayed in a single row.

Answer №3

.Container {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  max-width: 100%; //this will address the problem
}

.TagContainer:{
  display: flex;
  flex-shrink: 0;
}

Answer №4

To achieve the desired layout, make sure to set the Parent or Container's position attribute to Relative, and have the child element inside it with a position of absolute.

.Parent{
display: flex;
// Utilize any flexbox property
width: 100%;
height: 100%;


position: relative; // This is crucial
overflow: auto;
}

.Child{
position: absolute; // This is crucial as well
}

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

Why are you leaving a trail of timestamps in your .css files?

Within certain source codes, I have observed the following: <link rel="stylesheet" href="/css/style.css?201007071609" type="text/css" /> This prompts my question: What is the purpose behind appending 201007071609 to style.css in the code snippet ab ...

csstime

Trigger a click event on the <select> element, excluding the <option> element

When my select element is clicked, it updates its options using the onclick() listener. However, I am facing an issue where the listener fires when an option is clicked as well, preventing the user from selecting anything in the updated list. groupSelect ...

javascripthtmlnode.jseventslistener

what is the process for customizing the default font in tailwindcss?

I recently started a new project using React, and I have integrated a custom font in my index.css file. I have also included the necessary font files. @tailwind base; @tailwind components; @tailwind utilities; @tailwind variants; @import url(assets/font/ir ...

htmlcssreactjsfontstailwind-css

What steps can be taken to resolve the issue of "Uncaught TypeError: undefined is not a function"?

Check out the JSfiddle link for reference: http://jsfiddle.net/mostthingsweb/cRayJ/1/ Including my code below along with an explanation of what's going wrong: This is a snippet from the HTML header, showing all the necessary links: <head> ...

javascriptjqueryhtmlcss

Elements missing from the Bootstrap 5 framework

I've been attempting to link my bootstrap card deck to a mongo database with ejs. The website renders without any errors, but for some reason, the cards are not displaying. Does anyone have any insight into what could be causing this issue? Below is ...

htmlejsbootstrap-5bootstrap-cards

Preventing scrolling in jQuery UI Draggable when using flexbox

In my project, I am looking to organize a container using jQuery UI draggable/droppable feature. Since the elements in my list are arranged in a straight horizontal line, I have utilized display: flex. This arrangement works well when adding new items to ...

javascriptjqueryhtmlcssjquery-ui

RequestDispatcher.forward() does not work when servlet is invoked through an Ajax POST request

My login page involves user authentication through the firebase and sending the request to a servlet. When I click the submit button with correct credentials, the firebase authentication works, the servlet is called but an error is displayed in the browser ...

javascriptjavahtmlajaxservlets

Maximizing Bootstrap's Potential: Achieving Right Alignment for Divs

I am facing a challenge with aligning my div in the layout_cshtml. Currently, it is aligned to the left and the search bar and dropdownlist are not displaying properly. This negatively impacts the user experience. Additionally, my navigation menu is not ...

htmlcssasp.net-mvcbootstrap-4

Bootstrap 4 Vertical Timeline Layout Showing Uneven Columns Due to Large Margins

I'm currently working on my very first website and trying to implement a vertical timeline using Bootstrap 4. My goal is to have the timeline bar situated between two columns. However, I'm encountering an issue where I can't align text in th ...

htmlcssbootstrap-4timelinemargins

Guide to ensuring the navbar remains at the top of the webpage following an image

I am attempting to create a sticky navbar that stays at the top of the page once the header has been scrolled past. It should have a similar effect as shown in this example on codepen.io, but with the addition of an image that stretches across most of the ...

javascriptjqueryhtmlcss

Tips for iterating through a collection of images

I am interested in creating a loop to iterate over the images folder and display them on the screen, similar to the code snippet below: <section id="photos"> <a target="_blank" href="images/1.jpg"> <img src="images/1.jpg ...

javascripthtmlcssweb

How do you prevent items from shrinking in a flex container when they have more content?

I am facing an issue with a flex container where the items are set in a row. Once it reaches the end of the viewport width, I want it to overflow-x: scroll. However, instead of enabling scrolling, all items shrink when more items are added to fit the scree ...

htmlcssflexbox

Guide on including the sequential images within the previous and next button of a carousel

Currently working on my portfolio website, I have managed to code a carousel for displaying my images. The only challenge I am facing now is how to make the 'Next' and 'Prev' buttons show the next and previous images respectively. Does ...

javascripthtmlcssbuttoncarousel

What is the best way to align the ul, li, and span elements in a single row?

To display the 'previous' on the left side of the list item and the 'next' on the right side, aligned in a single line, how can this layout be achieved? <ul style= 'list-style-type: none;' class="filter1"> <li&g ...

javascriptjqueryhtmlcss

Do you know of a more streamlined approach to formatting this SCSS code?

Currently working on a Saleor Site and diving into the world of Django and SASS for the first time. While crafting my own styling rules in SCSS files, I've noticed some repetitive code that could potentially be streamlined. It seems like there should ...

cssdjangosass

Display images next to each other with no need for a scroll bar

I'm currently developing a Roulette website and I am struggling to make the roulette animation function properly. I have an image for the roulette wheel, but I need the image to vanish after reaching a certain point and then loop around to the left. ...

javascriptjqueryhtmlcss

The functionality of CSS transitions may be affected when dynamically adding a class

Creating a custom CSS for my main div: .main { height: 0%; position: absolute; width: 100%; z-index: 100; background: whitesmoke; bottom: 0; border-radius: 15px; padding: 20px; color: gray; left: 0; right: 0; transition: height 1s e ...

cssreactjstypescriptcss-transitions

Reveal concealed material by hovering over a div

Is there a way for me to replicate the animation found on this website: When hovering over the blue and green circles, they exhibit a captivating animation. I would like to achieve a similar effect with my design: What tools or techniques should I utiliz ...

htmlcssanimation

javascript conceal a div when clicked elsewhere

I am trying to implement two JavaScript functions: 1) Displaying a DIV (welcomeDiv) when clicking on a button; 2) Hiding the div by clicking outside of 'welcomeDiv' container. function showDiv() { document.getElementById('welcomeDi ...

javascripthtmlcss

Difficulty linking CSS to HTML in a Flask web application

My HTML/CSS file is pretty straightforward: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <meta name=&quo ...

pythonhtmlcsspython-3.xflask