Working on a code snippet:
#contains_upper_and_lower_panes {
overflow: hidden;
overflow-y: hidden;
overflow-x: hidden;
background: white;
margin-top: -113px; /* shifting up to cover up something above the container */
height: 100%;
width: 45rem;
}
.halfPane {
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
height:50%;
}<div id="contains_upper_and_lower_panes">
<div id="upper_pane" class="halfPane">
<h3>top</h3>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
<div id="lower_pane" class="halfPane">
<h3>bottom</h3>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
<p>paragraph</p>
</div>
</div>... and this works great as long as there aren't too many paragraphs.
However, if you double the number of paragraphs in either/both section, suddenly the container div shows a scrollbar and the height of both of the panes gets larger than 50% (and they each also show a scrollbar).
The aim is for the outer container to never show a scrollbar, while the upper and lower panes STAY at 50% height, and each show a scrollbar when necessary.
What am I doing wrong here?