The sticky header overflows the sticky container when scroll horizontally.

[mrdulin]

I'm submitting a ...

• bug report
• feature request
• support request

If you're reporting a bug, please provide a minimal demonstration of the problem

Bug Demo

What is the current behavior?

The sticky header overflows the sticky container

What is the expected or desired behavior?

The sticky header should stay in the sticky container.

Why do you want this? What use case do you have?

I want to scroll horizontally

What is your environment?

• Version: react-sticky 6.0.3
• Browser: Edge 120.0.2210.133

Is there anything else I should know?

No.

[mrdulin]

A solution is to use clip-path: inset(0 0 0 0) on the scroll container element.

.wrapper {
  position: relative;
  height: 300px;
  width: 600px;
  overflow: auto;
  border: 1px solid #ddd;
  clip-path: inset(0 0 0 0);
}

[LLmoskk]

A solution is to use clip-path: inset(0 0 0 0) on the scroll container element.

.wrapper {
position: relative;
height: 300px;
width: 600px;
overflow: auto;
border: 1px solid #ddd;
clip-path: inset(0 0 0 0);
}

thank you my friend 💗

[LLmoskk]

I found the correct solution to add an extra

wrapper to the outer layer at {({ style, isSticky })=>{}