flexboxgrid horizontal scrolling

horizontal scrolling

Open slavikse opened this issue 8 years ago • 22 comments

By reducing the width of the screen: 780px 1030 px 1220 px appears horizontal scrolling. When using normalize.css to a width of 800px there is a constant horizontal scrolling. code:

<div class="container">
  <div class="row">
    <div class="col-xs-4">txt</div>
    <div class="col-xs-4">txt</div>
    <div class="col-xs-4">txt</div>
  </div>
</div>

Dec 17 '15 16:12 slavikse

Thanks, container needs to be fixed. container-fluid should work. Are you needing static sizes?

Dec 17 '15 19:12 kristoferjoseph

I have the same issue. Even using only a row without a container.

Feb 09 '16 16:02 ArnaudValensi

Yep, both container classes seem to have their calculations slightly off so there's a horizontal scroll for at least 30px at each responsive breakpoint. Checked this using a barebones page like the code above and the CDN link to v6.3.0.

Feb 22 '16 12:02 nicolasartman

Any updates on this one?

Mar 29 '16 14:03 philippotto

For what it's worth, I can also confirm having horizontal scrolling on mobile with the use of .col-xs-12... also, I'm using only a containing .row, no .container, .container-fluid, or .wrap classes anywhere.

The .row class is applying the -1em margins, which widens the div beyond the left/right edges of the viewport, and the subsequent .col-[xx] columns have their padding of 1em.

Lookin' forward to any info on a fix, thanks!

Apr 02 '16 04:04 kristianwithak

Also experiencing this issue. For whatever reason my widths are off by 1em so i added a max width to the .container class and it solved my issue.

.container {
    max-width: calc(100% - 1em);
}

Another note, after doing that I experienced the problem again on two occasions.

Seemed to be related to having rows nested in col-xs-12s. Changing to just col-xs for some of them fixed this one
I had some fixed width items inside of a col-xs that was also a row, which i also added some flexbox css justify/align to. If I removed the fixed width of the flex children the problem resolved, but I needed the width. Removing the row class and just fully styling that inner flexbox myself fixed this one.

Apr 28 '16 21:04 stephantabor

Yeah, I have been experimenting with this a lot and have decided to use a different approach since a lot of people have run into issues. Will publish soon.

Apr 28 '16 22:04 kristoferjoseph

Some update about this? Very simple things are affected now. :(

May 29 '16 20:05 juniovitorino

I have the same issue. I've discovered that removing the negatives margins on the row class fixes the issue.

Jun 23 '16 15:06 manuelmazzuola

This is a very common issue that has been talked to a bunch in previous closed issues.

I have been working on a fix that does not require the margin hack, but just so we are all clear the margin hack is needed for when you rely on flex-wrap to wrap row contents ( see flexboxgrid.com for an example ).

This was refactored by a PR to match the bootstrap-grid api which requires container as well as some normalizing or reset styling to work like bootstrap does.

I use a simple yet heavy handed reset which is probably why I have never had this issue.

You could also include whatever reset boostrap is using in the meantime.

Jul 07 '16 17:07 kristoferjoseph

for me adding: padding-left: 15px; padding-right: 15px;

to .container fixed the problem.

I saw bootstrap 4 is using it in their flexbox grid, why won't you?