react-component / react-component/tabs
Nav Scroll tabs breaks flex layouts
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 572
- Forks
- 241
- Avg merge
- 4d 18h
- Merged PRs (30d)
- 4
Description
I've seen that it's using width: 99999px; by design to implement the scroll but this causes some issues when using the tabs inside a flex container.
We can reproduce this in the rc-tabs docs.
http://react-component.github.io/tabs/examples/activeKey.html
Change the container to display flex and add some padding like this:

You can see that the content inside the tab isn't respecting the padding of the container and it goes beyond the size of the page.

Removing the width on .rc-tabs-nav-scroll fixes the issue:

Note that this is actually really important, if there's any div that uses % widths inside the content or anything with position absolute, it'll be completely broken, the same applies to any kind of grid layout inside that.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the rc-tabs activeKey documentation example and reproduce the issue by placing the tabs in a flex container with padding. Inspect the .rc-tabs-nav-scroll styles, especially its 99999px width, and verify the layout with percentage-width or absolutely positioned content. Done means the tabs respect the container bounds without breaking scrolling.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100