horizontal scrolling

[Vyacheslav]

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>

[kj]

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

[Arnaud Valensi]

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

[Nick Artman]

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.

[Philipp Otto]

Any updates on this one?

[Kristian]

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!

[Stephan Tabor]

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.

1. Seemed to be related to having rows nested in col-xs-12s. Changing to just col-xs for some of them fixed this one
2. 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.

[kj]

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.

[Junio Vitorino]

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

[Manuel Mazzuola]

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

[kj]

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.

[Or Bachar]

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?

[nbonnefoy]

Fixed using a wrapper :
.container { padding: 1rem; }
Then the structure should be :
container
row
column

[Daniel Ramos]

Are there any updates on this?

[Devroy Blake]

Is there any update on this?

[Eric]

abandoned?

[Luke F]

@kristoferjoseph you mentioned a possible fix?

using your reset.css approach i still have the issue

[Luke F]

@stephantabor your solution gets me the closest

[ер]

Fixed in forked flexboxgrid2.

[sazad2]

@evgenyrodionov mind opening a PR here? or linking to commit sha w fix

[ер]

@sazad2 this project looks abandoned, so I decided to fork it. Switch to flexboxgrid2.

[Ronny Medina]

I have this problem when normalize.css has been added, it exists a solution?

this solution worked for me when I added this line in body overflow-x: hidden; I do not know if it is the most recommended?

[Ahmed]

On mobile if you don't need gutter simply a
.row{ margin: 0; } [class^="col-"], [class*=" col-"]{ padding: 0; }