I developed a modal window that showcases a form. Users can simply click on a button to insert new rows into the form. As more rows are added, the entire modal window should gradually increase in height until it's positioned 50px above the bottom of the viewport.
Here is a snippet from the demo:
<div class="parent">
<h4>window title</h4>
<a href="#">add new row</a>
<section>
<h4>content</h4>
<p>some random content which never scrolls</p>
<ul><li></li></ul>
</section>
</div>
The approach I'm using involves placing the modal window inside a div with absolute positioning. As the window grows taller, it will eventually reach a certain height and then I could apply overflow-y: scroll to the contents.
The challenge arises when only the form itself should be scrollable. When each new row is appended, the window should expand in height until it matches its parent's height. Once this point is reached, solely the ul content should become scrollable - without affecting the entire modal.
While I acknowledge that this problem can be solved with javascript, I am aiming to discover a pure css solution in order to eliminate any DOM-specific logic in our app, and to avoid dealing with viewport resize events, etc.
overflow-yrequires setting a max-height for the container. However, since I don't know what the list's height will be, this solution doesn't completely work.- I could potentially make the height of the list dynamic with absolute positioning, but this would cause the parent window to lose its height and fail to adjust as the child element changes size.