Table column overflow when using sticky header inside flexbox

[Eliepse]

Reproduction link

Steps to reproduce

• Use a table inside a flex container such as the width is flexible (see the example).
• Resize the view (increase the width)
• Resize the view (decrease the width)

What is expected?

The columns should resize when the view width decrease, and therefore adapt to the table's parent container.

What is actually happening?

The table columns does not resize, they overflow the table container.

Environment	Info
antd	4.21.7
React	18.2.0
System	Windows 11
Browser	Chromium, Firefox

---

The problem seem to come from the "colspan" of the column headers.

When I manually remove the "fixed" layout of the sticky header, the table works fine. I guess it has to be a bug in the react code then, not in the style.

Setting the container as "overflow: hidden" fix the issue, but then disable the sticky headers.

[github-actions]

You may look for issues:

1. 54% Table with sticky header: filter dropdown positions incorrectly on scroll #29366

_{🤖 By issues-similarity-analysis}

[Eliepse]

Just tested with CSS Grid with a similar layout, the problem is still here.

[afc163]

https://codesandbox.io/s/antd-reproduction-template-forked-9x36ey

https://github.com/ant-design/ant-design/pull/36604/files#diff-828769053a8b1778087d71bae0aac43832c3178ec10cad3dccaa5ac5f2efd996R177

[Eliepse]

It works! Thanks for the fix.

For the one arriving on this issue, the solution is to set min-width: 0; on the flex children (or grid children) that holds the table. I don't understand why, the fix is a bit strange to me but it works :-)