I've noticed a strange behavior where, when I scroll down, the yellow box goes on top of the blue box. I have set both boxes to have a position sticky so that they should stay in place and not overlap. However, I want only the orange box to be scrollable when I scroll down. Can anyone help with this issue?
https://i.sstatic.net/EsZuS.png
code to try:
https://codesandbox.io/s/example-react-hooks-usestate-forked-69suro?file=/src/index.js
code:
import React from "react";
import ReactDOM from "react-dom";
import "./app.css";
function App() {
return (
<div className="box-container">
<div className="box"></div>
<div className="both">
<div className="left__side"></div>
<div className="right__side">
<div className="oikea__box"></div>
<div className="oikea__box"></div>
<!-- more oikea__box divs -->
</div>
</div>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);.box {
height: 100px;
border: 1px solid black;
width: 100%;
background-color: blue;
position: sticky;
top: 0;
}
.both {
display: flex;
}
.left__side {
height: 200px;
border: 1px solid black;
width: 100px;
background-color: yellow;
position: sticky;
top: 0;
}
.right__side {
border: 1px solid black;
width: 100%;
background-color: white;
display: flex;
flex-wrap: wrap;
gap: 2px;
}
.oikea__box {
height: 100px;
width: 100px;
border: 1px solid red;
background-color: orange;
}