I've encountered a sticky position issue when the overflow property is set to auto on a parent element. I've tried various solutions like adding an extra wrapper or using clip instead of auto, but none have worked. While I did find a solution using JavaScript, I'd prefer a pure CSS alternative if possible.
<div className="wrapper">
<div className="left">
<div className="header" />
</div>
<div className="right">
<div className="header">Blablabla blablabla blabla</div>
<div className="table"/>
</div>
</div>
Here's the corresponding CSS:
.wrapper {
margin-top: 30px;
display: grid;
grid-template-columns: 200px auto;
width: 100%;
max-height: 30vh;
overflow-y: auto;
position: relative;
}
.left {
background-color: chocolate;
}
.right {
background-color: chartreuse;
height: 50vh;
overflow-x: auto;
position: relative;
}
.header {
height: 20px;
width: 100%;
background-color: black;
position: sticky;
top: 0;
color: white;
}
.table {
width: 2000px;
}
I've created a small example to demonstrate: https://stackblitz.com/edit/react-starter-typescript-yrmmde
My goal is to make the right header sticky while allowing the right container to scroll horizontally simultaneously.