Ячейка в сетке CSS переполняется, если установлено выравнивание элементов: конец ⇐ CSS

[Anonymous]

Когда я использую align-items: end в моем примере, содержимое переполняется, и я понятия не имею, почему. Я ожидаю того же поведения, что и в случае с align-items: start. Я попытался установить ширину, но не смог найти решения.
Вот живая демонстрация: https://stackblitz.com/edit/stackblitz- ... file=index. html
Спасибо за помощь.

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

* {
box-sizing: border-box;
}

.grid {
display: grid;
grid-template-columns: 50% 50%;
gap: 5px;
}

.cell {
display: flex;
flex-direction: column;
border: 1px solid red;
}

.cell.end {
align-items: end;
}

.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

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

Label

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.



Label

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.



Label

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.



Label

Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

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