Дочерний контейнер Flexbox превышает высоту родительского ⇐ CSS

[Anonymous]

Я пытаюсь создать меню вертикальной прокрутки на «панели», расположенной на панели управления приложения. Как видно из фрагмента ниже (где я добавил слишком много дочерних элементов), содержимое всегда превышает размер контейнера. Я пробовал несколько комбинаций гибких размеров, используя min-height: 0 и другие трюки, но безрезультатно.
Это меня особенно расстраивает, потому что мне удалось решить эту проблему в других частях моей панели управления, но этот конкретный контейнер по-прежнему ускользает от моих решений.

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

#sensor-list-subpanel {
flex: 40;
min-height: 0;
}

#sensor-list-container {
display: flex;
flex-direction: column;
gap: 10px;
height: 100%;
overflow-y: auto;
}

#sensor-cards {
display: flex;
flex-direction: column;
gap: 5px;
}

#sensor-description-subpanel {
display: flex;
flex-direction: column;
gap: 10px;
flex: 60;
}

#event-panel {
height: 400px;
min-height: 0;
}

#event-panel-container {
display: flex;
flex-direction: column;
gap: 15px;
height: 100%;
}

#event-header-time {
font-family: monospace;
font-weight: bold;
font-size: 0.9rem;
}

#sensor-panels-container {
display: flex;
flex-direction: row;
gap: 20px;
flex: 1;
}

#sensor-panels-container > * {
padding-bottom: 0;
padding-right: 0;
}

#sensor-panels-container > * > * {
/* scroll bar alignment */
padding-bottom: 10px;
padding-right: 10px;
}

.panel {
border-radius: 10px;
background-color: gray;
padding: 20px;
}

.panel.subpanel {
background-color: white;
}

.panel.compact {
padding: 10px;
}

.card {
border-radius: 10px;
margin: 3px;  /* compensate for outline border */
}

.card.selected {
background-color: lightgreen;
outline: 3px solid green;
/* outline, rather than border, will allow smooth transitions without resizing */
}

.card:hover {
filter: brightness(95%);
cursor: pointer;
transition: all 0.2s ease;
}

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

.sensor-card {
padding: 6px 12px;
outline: 3px solid var(--border-subcard);
background-color: var(--bg-subcard);
cursor: pointer;
}

.sensor-card-details {
display: grid;
grid-template-columns: 15px auto;
gap: 2px 5px;
}

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

(icon)

HEADER
(time)





LABEL



(i)
NAME
(v)
(n) meters



(i)
NAME
(v)
(n) meters



(i)
NAME
(v)
(n) meters



(i)
NAME
(v)
(n) meters



(i)
NAME
(v)
(n) meters


(i)NAME(v)(n) meters


(i)NAME(v)(n) meters






(icon)
NAME

Я попытался создать репрезентативный фрагмент, демонстрирующий проблему.

Подробнее здесь: https://stackoverflow.com/questions/793 ... -of-parent