Unable to Scroll Scrollable Content

[NaniChennuri]

My Structure (There are no vertical slides but only Horizontal Slides.)
FullPage
------Horizontal Sliders
---------Slider1
---------Slider2

On each of the Horizontal Slide, I am having a table which lists set of items. I am able to scroll horizontally but unable to scroll the contents inside the table using mouse wheeler.

Below is the sample Code.

--------------------------------------------------MainPage-------------------------------------------------------------------
`import React from 'react';

import { Fullpage, HorizontalSlider, Slide } from '../lib/index';
const { changeFullpageSlide, changeHorizontalSlide } = Fullpage;

require('./normalize.css');
require('./skeleton.css');
require('./exampleStyles.styl');

const fullPageOptions = {
// for mouse/wheel events
// represents the level of force required to generate a slide change on non-mobile, 0 is default
scrollSensitivity: 2,

// for touchStart/touchEnd/mobile scrolling
// represents the level of force required to generate a slide change on mobile, 0 is default
touchSensitivity: 2,
scrollSpeed: 500,
resetSlides: true,
hideScrollBars: true,
enableArrowKeys: true,

// optional, set the initial vertical slide
activeSlide: 0
};

const horizontalNavStyle = {
position: 'absolute',
width: '100%',
top: '50%',
zIndex: 10
};

const horizontalSliderProps = {
name: 'horizontalSlider1',
infinite: true
};

class FullpageReact extends React.Component {
constructor(props) {
super(props);
this.state = {
active: {
Fullpage: 0,
horizontalSlider1: 0
}
};

this.onSlideChangeStart = this.onSlideChangeStart.bind(this);
this.onSlideChangeEnd = this.onSlideChangeEnd.bind(this);

}

onSlideChangeStart(name, props, state, newState) {
if (!this.horizontalNav) {
this.horizontalNav = document.getElementById('horizontal-nav');
}

if (name === 'horizontalSlider1') {
  scrollNavStart(this.horizontalNav);
}

}

onSlideChangeEnd(name, props, state, newState) {
if (name === 'horizontalSlider1') {
scrollNavEnd(this.horizontalNav);
}

const oldActive = this.state.active;
const sliderState = {
  [name]: newState.activeSlide
};

const updatedState = Object.assign(oldActive, sliderState);
this.setState(updatedState);

}

render() {
const { active } = this.state;

const horizontalSliderName = horizontalSliderProps.name;
const horizontalActive = this.state.active[horizontalSliderName];

const prevHorizontalSlide = changeHorizontalSlide.bind(null, horizontalSliderName, horizontalActive - 1);
const nextHorizontalSlide = changeHorizontalSlide.bind(null, horizontalSliderName, horizontalActive + 1);

const horizontalNav = (
  <div id='horizontal-nav' style={horizontalNavStyle}>
    <span onClick={prevHorizontalSlide}><button>PREV</button></span>
    <span style={{position: 'absolute', right: '0px'}} onClick={nextHorizontalSlide}><button>Next</button></span>
  </div>
);

const horizontalSlides = [
  <Slide style={{backgroundColor: 'red'}}>
      <TableData cardTitle="one"/>
  </Slide>,
  <Slide style={{backgroundColor: 'yellow'}}>
        <TableData cardTitle="two"/>
  </Slide>,
];
horizontalSliderProps.slides = horizontalSlides;

const horizontalSlider = <HorizontalSlider id='horizontal-slider-1' {...horizontalSliderProps}>{horizontalNav}</HorizontalSlider>;

const verticalSlides = [
  horizontalSlider,
];
fullPageOptions.slides = verticalSlides;

return (
  <Fullpage onSlideChangeStart={this.onSlideChangeStart} onSlideChangeEnd={this.onSlideChangeEnd} {...fullPageOptions}>
  </Fullpage>
);

}
}

function scrollNavStart(nav) {
// make the nav fixed when we start scrolling horizontally
nav.style.position = 'fixed';
}

function scrollNavEnd(nav) {
// make the nav absolute when scroll finishes
nav.style.position = 'absolute';
}

export default FullpageReact;
`

--------------------------------------------------TablePage-------------------------------------------------------------------
`import React from 'react'

export default class TableData extends React.Component {
constructor(props) {
super(props);
}

render() {
return (

    <Card className="mb-4">
      <CardBody className="p-3">
        <CardTitle className="m-0">
          {this.props.cardTitle}
        </CardTitle>            
      </CardBody>
      <CardBody className="p-3">
        <div className="single-field-editor-card-wrap">
          <div className="single-field-editor-table-wrap">
            <Table className="table-condensed single-field-editor-table ">
              <tbody>
                {itemList.map((item) => {
                  return (
                    <tr key={item.id}>
                      <td className="p-1">{item.name}</td>
                    </tr>
                  )
                })}
              </tbody>
            </Table>
          </div>
        </div>
      </CardBody>
    </Card>
  </div>
)

}
}
`

--------------------------------------------------Table Page CSS-------------------------------------------------------------------

`.single-field-editor-card-wrap {
position: relative;
}

.single-field-editor-table-wrap {
height: 300px;
overflow-y: scroll;
border: 1px solid #ddddddff;
border-radius: 5px;
padding: 5px;
}

.single-field-editor-table {
table-layout: initial;
}

.Card {
max-width: 50%;
min-width: 50%;
left: 20%;
position: absolute;
}`