Scrolling within inner div is not functioning properly in the Mozilla Firefox browser.
However, it works seamlessly in Chrome.
Is there a workaround for enabling scrolling in Firefox? Here is the fiddle link: http://jsfiddle.net/t6jd25x9/2/
body {
font-size: 14px;
background: #fff;
color: #000;
}
#second-fold {
height: 300px;
overflow-y: scroll;
position: fixed;
top: 50px;
left: 150px;
width: 100%
}
#second-fold div {
width: 30%;
}
<section id="first-fold">
<h1>Fold 1</h1>
<p>Lorem Ipsum</p>
...
// Repeat of Lorem Ipsum content goes here
</section>
<section id="second-fold">
<div>
<h1>Fold 2</h1>
// Slides with Lorem Ipsum content go here
</div>
</section>
<section id="third-fold">
<h1>Fold 3</h1>
// More Lorem Ipsum content for Fold 3
</section>