Scroll bottom div on top of the div placed above - html

Question

I have tow divs in a flex container, one containing the chart and another containing it's legends as below :
When I scroll on the div below, it should scroll up on the chart like so :
Here's my attempt at this with z-index and position absolute :
HTML -
<div className={`${style['chart__doughnut-wrapper-opportunity']} ${props.class}`}>
<div className={style.chart__data}>
<div className={style.chart__doughnut}>
<Chart
className="chart"
data={tabChartData}
width={props.width}
height={props.height}
options={optionsForGraphic(
props.type,
props.orientation,
tabChartData,
)}
/>
</div>
</div>
<div className={style.chart__legend}>
<div className={style.chart__table}>
<ChartLegend
chartType={'doughnut'}
page={props.page}
legendData={tabChartData}
percentage={percentage}
legendColor={legendColor}
legendStyle={legendStyle}
/>
</div>
</div>
</div>
CSS :
.chart__doughnut-wrapper-opportunity {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
max-height: 13.5rem;
margin: 1.25rem 0rem;
width: 100%;
border-bottom: #dadbdf solid 0.063rem;
.chart__data {
display: flex;
height: 100%;
align-items: center;
min-height: 13.5rem;
padding: 0 1rem 0 0;
width: 45%;
position: relative;
.chart__doughnut {
padding: 0;
width: 100%;
canvas {
z-index: 1;
position: relative;
}
}
}
.chart__legend {
display: flex;
// width: 100%;
position: absolute;
height: 20rem;
padding: 0 0 0 1rem;
z-index:10;
.chart__table {
display: flex;
flex-direction: column;
height: 20rem;
width: 100%;
word-wrap: break-word;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
}
}
}
Which has resulted in something like this :
I am stuck, not getting any ideas, please help.

Answer 1

Try applying the overflow to the chart_legend class and let's see