Scroll bottom div on top of the div placed above

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