Requirements are as follows:
Use either css or flex to do the following (which ever is most appropriate) and without the use of javascript:
A Parent div which has 2 columns and one rowThe content of child1 will determine the max-height of both columnsHowever, it's possible the contents of child 2 could cause the height to exceed that of child1. In which case, child 2 should remain the same height but the contents of timeslots should scroll
This is what I have so far:
.parent { display: grid; grid-template-columns: auto 1fr; align-items: start;}.child1 { background: #ddd; padding: 1rem;}.child2 { background: #eee; padding: 1rem; max-height: 100%; overflow: hidden; display: flex; flex-direction: column;}.timeslots { overflow-y: auto; flex: 1 1 auto;}<div class="parent"><div class="child1"> Tall content here (sets height)<br> Tall content here (sets height)<br> Tall content here (sets height)<br></div><div class="child2"><div class="timeslots"> Lots of scrollable content here...<br> Lots of scrollable content here...<br> Lots of scrollable content here...<br> Lots of scrollable content here...<br> Lots of scrollable content here...<br> Lots of scrollable content here...<br> Lots of scrollable content here...<br> Lots of scrollable content here...<br></div></div></div>I have tried the above and other variations using css grid, but in all cases, child 2 keeps stretching vertically, I can never get .timeslots to scroll.
I cannot provide fix heights, all content in both divs are dynamic and therefore so are the heights.