Currently, I am immersed in a project where one section must dynamically populate elements pulled from a database. Due to this dynamic nature, the quantity of elements can vary significantly.
The challenge lies in our design concept, which aims to eliminate the need for scrolling on the entire page but rather have scrollable sections when necessary. My initial attempt at using the overflow property on the sections did not yield the desired outcome.
Despite trying all possible variations of the overflow attribute, setting it to scroll only displayed a static scroll bar. I'm struggling with making only section-one scroll within itself without affecting the overall page's scrollability.
To illustrate the problem, I've created a demonstration on CodePen: http://codepen.io/leofontes/pen/aNaBox
body {
overflow: hidden;
}
main {
margin: 0;
width: 100%;
height: 100%;
}
.section-one {
background-color: #FF0000;
float: left;
min-height: 1400px;
overflow: visible;
width: 15%;
}
.section-two {
background-color: #00FF00;
float: left;
min-height: 1400px;
width: 70%;
}
.section-three {
background-color: #0000FF;
min-height: 1400px;
float: left;
width: 15%;
}<main>
<section class="section-one">
<p>this is section one</p>
<p>this is section one</p>
...
<p>this is section one</p>
</section>
<section class="section-two">
<p>this is section two</p>
</section>
<section class="section-three">
<p>this is section three</p>
</section>
</main>Appreciate any help or advice!