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?
What you can do is uncomment the line align-items: flex-start; in the .container block and add max-height: calc(100% - 2em); to the .variableHeightBlock. We substract 2em from 100% using the function calc() because of the padding: 1em set to the element (padding-top 1em plus padding-bottom 1em).
So the final code will be :
.container{
background-color: #00000020;
display: flex;
gap: 1em;
height: 80vh;
align-items: flex-start; /* uncomment this line */
justify-content: space-around;
}
.variableHeightBlock {
background-color: #00000020;
overflow-y: auto;
padding: 1em;
max-height: calc(100% - 2em); /* <== add this line */
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>
Just add max-height: 100%; and box-sizing: border-box; in .variableHeightBlock.
.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;
max-height: 100%;
box-sizing: border-box;
}<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>