I'm trying to replicate the same effect that you see on Trello in how a list is only as tall as needed, up to a limit determined by the list container.
.container{ background-color: #00000020; display: flex; gap: 1em; height: 80vh; /*align-items: flex-start; */ justify-content: space-around;}.variableHeightBlock { background-color: #00000020; overflow-y: auto; padding: 1em; scrollbar-gutter: stable; scrollbar-width: thin;}<div class="container"><div class="variableHeightBlock"> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line</div><div class="variableHeightBlock"> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line<br/> line</div></div>You can see here that I've almost got it - there's two elements here and since one is taller than the container it gets capped off and is scrollable. What I don't like about this is that the other element is needlessly tall.If you uncomment the "align-items" line, you'll get the opposite problem - the shorter element is now properly sized, but the larger element spills outside the boundaries of the container.How can I edit the CSS here to get both effects - left element is only as large as needed, and the right element becomes scrollable rather than overflowing from the container?