Отрегулируйте гибкий элемент так, чтобы он был настолько высоким, насколько необходимо, но не выше контейнера. ⇐ CSS

[Anonymous]

Я пытаюсь воспроизвести тот же эффект, который вы видите в Trello, когда список становится настолько длинным, насколько это необходимо, вплоть до предела, определенного контейнером списка.
< div class="snippet">

Код: Выделить всё

.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;
}

Код: Выделить всё

  

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

line

Здесь вы можете видеть, что я почти понял — есть два элемента здесь, и поскольку один из них выше контейнера, он закрывается и его можно прокручивать. Что мне в этом не нравится, так это то, что другой элемент излишне высокий.
Если вы раскомментируете строку «align-items», вы столкнетесь с противоположной проблемой — более короткий элемент теперь имеет правильный размер, но элемент большего размера выходит за пределы контейнера.
Как мне отредактировать здесь CSS, чтобы получить оба эффекта: левый элемент становится настолько большим, насколько необходимо, а правый элемент становится прокручиваемым, а не выходит за пределы контейнера?

Подробнее здесь: https://stackoverflow.com/questions/787 ... -container