ant-design: The `Row` component will overflow when setting gutter

You can add a wrapper with overflow: hidden as workaround: https://codesandbox.io/s/oonl1ylnvy

There is no solution about this problem now.

Here’s what I think is a better workaround with CSS:

.ant-row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.ant-col:first-child {
    padding-left: 0 !important;
}

.ant-col:last-child {
  padding-right: 0 !important;
}

This removes the margins from the Row component and the padding of the first and last Col

Ticket from 2018 and this is still a problem.

Seems like an easy fix that no one has bothered to implement, the above recommend solution works fine with zero side effects.

Any update on this?

Still being an issue in the latest version…

As I told you before, I had this issue as well and I fixed it by changing my layout. So it’s something you can fix as well.

If you have a demo I can take a look, otherwise I can’t remember exactly how I did it.

Here’s what I think is a better workaround with CSS:

.ant-row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.ant-col:first-child {
    padding-left: 0 !important;
}

.ant-col:last-child {
  padding-right: 0 !important;
}

This removes the margins from the Row component and the padding of the first and last Col

This solution works! But it’s sad that this problem still exists.

Yes, I can see that it overflows, but as I said before, that’s not a problem. It’s not a problem because the Col is compensating for that. Even in your example, the first column is aligned correctly (they’re not exceeding the parent container)

Sure.

1. Rows should have as children only columns, and nothing else (do not nest directly one row in another row)
2. Columns should have as parents only rows (sometimes you can make a mistake by having a column as a child of another column)

If you follow these two rules you shouldn’t have any problems.

If you’re still having problems maybe you can create a simple demo and I could show you how to fix your problems.

I resolve this using

.ant-row-flex, .ant-row { margin: 0 !important; }

Here’s what I think is a better workaround with CSS:

.ant-row {
  margin-right: 0 !important;
  margin-left: 0 !important;
}

.ant-col:first-child {
    padding-left: 0 !important;
}

.ant-col:last-child {
  padding-right: 0 !important;
}

This removes the margins from the Row component and the padding of the first and last Col

This fails when using responsive breakpoints that cause columns to wrap. The rows that get created when hitting the various breakpoints (i.e. xs, sm, md, et.c) end up with incorrect margins because of the first and last CSS child selectors. This solution will work perfect however as long as you aren’t using responsive breakpoints.

Same here, V5.14.1

Minimal example of horizontal overflow (which results in visible horizontal scroll bar).

https://stackblitz.com/edit/react-3dvczh?file=index.js

Yes, it’s true that wrapping Row in a parent div with overflow-x: hidden will stop the scroll bar from appearing as suggested by @afc163 , but it would be nice if the library implemented this fix.

The only reason this scroll bar issue doesn’t show up in the canonical examples is because the entry point div (i.e. #container div) has a padding of 24px, which exceeds half the maximum gutter size, thus the negative margins applied to the first and last Col in a Row don’t pierce the #container div’s padding.

We solved by wrapping Row in a <section> with box-sizing: border-box

This problem is not only in Row, but also in Form.Item. The official example also has unnecessary scrollbars, when the width is small enough. https://codesandbox.io/s/6dtwbj When the width is small enough, the ‘wrapperCol’ should be ignored or the ‘offset’ should be 0.

+1

running v4.8.0

I think this is solved in other grids. I wrote this SCSS grid generator 5 years ago that solves the issue by using padding-left on the cells for the gutter (instead of using both left and right), and negative margin-left on the row to offset the gutter. The overflow happens on the left, so you don’t get right scrolling overflow (left overflow is ignored by the browser)

example here: http://matthewlein.github.io/yellowgrid/