title: Scroll bottom div on top of the div placed above
body: <p>I have tow divs in a flex container, one containing the chart and another containing it's legends as below :</p>
  <p><a href="https://i.stack.imgur.com/jbsv5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jbsv5.png" alt="Initial State of the Div" /></a></p>
  <p>When I scroll on the div below, it should scroll up on the chart like so :
  <a href="https://i.stack.imgur.com/s9gtt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/s9gtt.png" alt="enter image description here" /></a></p>
  <p>Here's my attempt at this with z-index and position absolute :</p>
  <p>HTML -</p>
  <pre><code>      &lt;div className={`${style['chart__doughnut-wrapper-opportunity']} ${props.class}`}&gt;
          &lt;div className={style.chart__data}&gt;
            &lt;div className={style.chart__doughnut}&gt;
                &lt;Chart
                  className=&quot;chart&quot;
                  data={tabChartData}
                  width={props.width}
                  height={props.height}
                  options={optionsForGraphic(
                    props.type,
                    props.orientation,
                    tabChartData,
                  )}
                /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div className={style.chart__legend}&gt;
            &lt;div className={style.chart__table}&gt;
                &lt;ChartLegend
                  chartType={'doughnut'}
                  page={props.page}
                  legendData={tabChartData}
                  percentage={percentage}
                  legendColor={legendColor}
                  legendStyle={legendStyle}
                /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  </code></pre>
  <p>CSS :</p>
  <pre><code>  .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;
      &amp;::-webkit-scrollbar {
        display: none;
      }
    }
  }
  </code></pre>
  <p>}</p>
  <p>Which has resulted in something like this :</p>
  <p><a href="https://i.stack.imgur.com/CdcfZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CdcfZ.png" alt="enter image description here" /></a></p>
  <p>I am stuck, not getting any ideas, please help.</p>