The `Row` component will overflow when setting gutter

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

3.4.1

Environment

os: mac os 12, browser: chrome 65

Reproduction link

https://zhuchuji.github.io/antd-issues/

Steps to reproduce

1. Layout with Row and Col
2. Set gutter to the Row

What is expected?

The Row should not overflow

What is actually happening?

The Row overflows and produces the scrollbar

---

Antd sets margin-left and margin-right to a negative value on Row to compensate the padding-left of the first Col child and padding-right of the last Col child, which will make the Row box larger than its parent as it’s set to box-sizing: border-box. Users have to provide a container with padding to ensure the Row will not overflow, which is a big problem in layout especially in responsive web, because they have to set variables for gutters and calculate it for the padding of the container. It’s totally inconvenient. If the grid system removes the first column’s padding-left and the last column’s padding-right, the Row does not need a negative margin any more. Perhaps, it could be fixed by adding a container in Row, so that you don’t have to detect which column is the first child and which is the last.

[afc163]

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

There is no solution about this problem now.

[orlando]

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