Items in a scrolling flex container are not properly aligned in the center

HTML:

<div id="container">
    <div class="item">Foo</div>
    <div class="item">Bar</div>
</div>

CSS:

#container {
    display: flex;
    justify-content: center;
    overflow: auto;
}
.item {
    flex-grow: 1;
    min-width: 200px;
    max-width: 300px;
}

As the container shrinks to less than 400px, a horizontal scroll bar appears as expected. However, the first item starts getting hidden by the left edge of the container, even when completely scrolled to the left. The more the container shrinks, the more the item gets obscured.

See the live demonstration here: http://jsfiddle.net/FTKcQ/. Resize the result frame to see the issue. This has been tested in Chrome 30 and Firefox 24 browsers.

If the value of justify-content is changed from center to any other value (e.g. space-between), all content becomes visible upon scrolling. Why does this difference occur with centered items?

The aim here is to have a row of centered items that expand within a certain range. If the minimum-width items cannot fit in the container, it should be able to scroll to show all items.

cssflexbox

Answer №1

As per the information provided by MDN (Flex item considerations), it is normal for flex items to remain centered even if they overflow the container in Flexbox:

Flexbox's alignment properties ensure true centering, unlike other methods in CSS. This implies that flex items will stay centered, even when they exceed the boundaries of the container. While this can pose issues if they overflow beyond the top or left edge of the page, preventing scrolling to that area even if there is content present, future updates will introduce a "safe" option for alignment properties.

For now, addressing these concerns can be achieved by using margins for centering, as they provide a more controlled way of handling overflow. Instead of utilizing align- properties, utilize auto margins on the flex items to be centered. For justify- properties, apply auto margins to the outer edges of the first and last flex items within the container.

To obtain the desired outcome, use margins for alignment. Simply include margin-left: auto for the first item and margin-right:auto for the last item.

Here is a demonstration: http://jsfiddle.net/WFxQk/

Answer №2

Experimenting with the use of style sheets 

    #container {
        background-color: green;
        display: flex;
        
        align-items: center;
        overflow: auto;
    }
    .item {
        background-color: white;
        border: 1px solid black;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: auto;
        min-width: 200px;
        max-width: 300px;
        margin: auto;
    }
I took out justify-content, reverting it to the default flex-start. Additionally, I included margin:auto which now appears to achieve center alignment.

Check out the Updated Demo: http://jsfiddle.net/FTKcQ/1/

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

I'm noticing that my CSS is behaving differently than expected. Despite setting position: absolute, the output is displaying as inline-block instead of block. Why is this happening

div { width:200px; height:200px; position: absolute; } .first-container { background-color: #9AD0EC; } .second-container { background-color: red; left: 200px; } .third-container { background-color: blue; left:400px; } Despite setting th ...

javascripthtmlcssweb

Angular UI grid: Arranging numbers in a straight line at the decimal point

I am interested in aligning decimal numbers in Angular UI Grid as shown below. 11.293 .89 233424 .34345 I have considered different approaches such as using a cell template with aligned divs or transparent 0s. Has anyone successfully imp ...

javascripthtmlcssangularjsangular-ui-grid

Is utilizing a personalized hook the most optimal resolution?

Currently, I am in the process of developing a chess application and encountered a scenario where I needed the board size to dynamically adjust to the window size while maintaining a square aspect ratio (width equals height). To address this, I created my ...

cssreactjs

Guide to positioning a div at the bottom of a Drawer while maintaining the same width as the Drawer in React Material UI

Creating a Drawer on the right-hand side using <Drawer/>, I am trying to make a <div> stick to the bottom of the <Drawer />. The width of this <div> should match the width of the <Drawer />. Desired Outcome: https://i.sstati ...

htmlcssreactjsmaterial-ui

Guide on resizing a background image to fit a div

Looking to enhance the appearance of my website by incorporating a cover image. Positioned at the top of the page is a div tag with dimensions set to 80% width and auto height. I aim to insert an image as the background of this div, stretching in width b ...

csshtml

How can I create a fixed-top navbar with CSS that sticks when scrolling?

Having two top navbars on a single page can be tricky. One is fixed in its position, while the other is sticky. But when scrolling down, the sticky navbar fails to stay on top of the fixed one: https://i.sstatic.net/4mUAZ.png Furthermore, as you scroll d ...

htmlcssbootstrap-4

Is there a way to generate a perfectly proportioned rectangular treemap using d3.js?

When attempting to generate a rectangular treemap in d3.js, I encountered an issue where the resulting shape was not as desired. There were instances of missing data and empty spaces within the rectangular treemap. Upon investigation, I found that removin ...

javascripthtmlcssd3.jsdata-visualization

What's the best way to eliminate blank space in my Bootstrap grid columns?

I'm facing an issue with the search filter layout on my website. It includes input fields for a search term, two datepickers, and two buttons: <div id="search-holder"> <div id="search-box"> <div ...

htmlcsstwitter-bootstrapbootstrap-4

Error 404: Django is unable to locate the static/css files

This particular issue appears to be quite widespread, but existing Q&A resources are outdated and do not address my specific problem. Currently, with Django 2.0.2, my basic webpage is failing to render the bootstrap.css file simply because it cannot locat ...

pythoncssdjangostatic

Why isn't my CSS button changing color on hover?

div ul li a.button:hover { text-color:#FF0000; background: #0040FF; } I have been attempting to create buttons that change color and text when hovered over. Despite trying different methods, the changes do not seem to be taking effect. Below is the co ...

htmlcss

Is it just me, or does the float left - float right combination only break in IE

Oh dear, it seems like IE9 is causing some trouble again. The other "capable" browsers handle this HTML just fine, including IE8 which isn't even that great. Here's the code snippet: <div class="contact_info_city" id="contact_info_cityX"> ...

htmlcssinternet-explorercss-floatline-breaks

What could be causing the alignment issue with cells in Bootstrap?

I'm currently facing an issue with Bootstrap where two columns that are supposed to appear side-by-side on medium resolution end up displaying one below the other. You can view a screenshot of the problem here, and the code can be found at this link. ...

htmlcssbootstrap-4

Arrange four Divs next to each other with flexbox styling

I've been struggling with aligning my cards side by side. They are a series of divs nested in lists under a <ul> Changing the positioning is not resolving the issue, and I'm hesitant to alter the display as it's crucial for responsive ...

javascripthtmlcssresponsive-designuser-experience

What is the best way to ensure these SVG images line up next to each other without disappearing?

I'm currently working with some code that utilizes Bootstrap 4, and it looks something like this: <header> <div class="row"> <div class="col-xs-12 col-md-9"> <h1>Single and Satisfied</h1> </div> < ...

csstwitter-bootstrapsvgbootstrap-4responsive-design

Utilizing inline styles with the asset pipeline feature in Rails

<%= link_to root_path do %> <div class=""> <div style="background-image:<%= image_tag " image1.png "%>"> </div> <div> <h2>Title</h2> <p>Paragraph</p> </div& ...

cssruby-on-rails-5asset-pipeline

Modifications in SCSS are not reflected in the CSS file

I've encountered an issue with updating my CSS file when making changes to the style.scss file. Even after trying various commands like npm install -g sass and running sass style.scss style.css, I keep getting an error message that says: "File C:&bsol ...

csssass

Animated collapse with margin effect in Material-UI

I have been utilizing the MUI-Collapse component to display collapsible content within a list. I am looking to add vertical spacing between the Collapse components in the list, but I do not want the spacing to remain when the Collapse is collapsed. I am ha ...

htmlcssreactjsmaterial-ui

What is the best way to customize the appearance of only one of two identical tables using HTML and CSS?

I have two tables that look identical: <html> <head> <style> td, th { text-align: left; padding: 28px; } </style> </head> <body> <table> <tr> ...

htmlcss

Using Bootstrap: adjusting the height of input-group and select elements

How come the select element within an input-group doesn't render similarly to the input element? I would like the height of the select element to be relative to the input-group. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css ...

csstwitter-bootstrapbootstrap-4

Introducing a fresh input field that includes a dropdown selection feature

When a user clicks on the "+" button, a new row should be added with a dropdown and input field. I want the input field name to be the dropdown value for each row. If "Facebook" is selected in the first dropdown, it should not appear in the second dropdo ...

javascriptphpjqueryhtmlcss