How can I vertically "stack" these DIVs with CSS?

Question

Here's the code I'm working with:

#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 goal 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?

Check this https://stackoverflow.com/questions/36568572/flexbox-vertically-split-container-in-half — OMi Shah, Nov 19 '22 at 06:49

score 0 · Accepted Answer · answered Nov 19 '22 at 06:46

Within #contains_upper_and_lower_panes set the height to 100vh, so its set to the full screen on any device, this way your height: 50% in the half pane class will take effect

#contains_upper_and_lower_panes {
  overflow: hidden;
  overflow-y: hidden;
  overflow-x: hidden;
  background: white;
  margin-top: -113px; 

/* Modify this line below */
  height: 100vh;

  width: 45rem;
}

Then you can play with the half pane height or width for better results

How can I vertically "stack" these DIVs with CSS?

1 Answers1