在上面放置的 div 頂部滾動底部 div

Question

我在一個 flex 容器中有兩個 div，一個包含圖表，另一個包含它的圖例，如下所示：

當我在下面的 div 上滾動時，它應該像這樣在圖表上向上滾動：

這是我對 z-index 和 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;
    }
  }
}

}

這導致了這樣的事情：

我被卡住了，沒有任何想法，請幫忙。

Answer 1

嘗試將溢出應用於 chart_legend class 讓我們看看