I have a crossword editor laid out as
_______________________
Top bar
_______________________
........ ___________
........ Across Clues
..Grid..
........
........
___________
Down Clues
_______________________
Bottom bar
_______________________
The across and down clues are both unordered lists, with the html structure
<div>
<label>Across</label>
<ul>Clues</ul>
<label>Down</label>
<ul>Clues</ul>
</div>
There's a codepen here with a stripped-down version of the complete page html and enough placeholder clues to demonstrate the problem.
I'd like the list of clues to size itself to between the grid height (minimum) and the page height minus top/bottom bars (maximum), with scrollbars appearing on both lists if they get too long. What is happening instead is the lists are both displaying all the clues, with a scrollbar appearing on the entire page.