I am attempting to create a vertical scroll menu within a "panel" which sits in an app dashboard. As seen in the snippet below (where I added an excessive amount of children), the content always exceeds the size of the container. I have tried multiple combinations of flex sizing, using min-height: 0, and other tricks to no avail.
This is particularly frustrating for me because I have been able to solve this issue in other parts of my dashboard, but this particular container continues to elude my solutions.
#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;}<div id="event-panel" class="panel"><div id="event-panel-container"><div style="display: flex; flex-direction: row; align-items: center; gap: 15px;"><span>(icon)</span><div style="display: flex; flex-direction: row; align-items: baseline; gap: 0.5rem;"><h1>HEADER</h1><p id="event-header-time">(time)</p></div></div><div id="sensor-panels-container"><div class="panel subpanel compact" id="sensor-list-subpanel"><div id="sensor-list-container"><h5 class="note">LABEL</h5><div id="sensor-cards"><div class="card sensor-card selected"><div class="sensor-card-details"><span>(i)</span><span class="b overflow-ellipsis">NAME</span><span>(v)</span><span class="note">(n) meters</span></div></div><div class="card sensor-card"><div class="sensor-card-details"><span>(i)</span><span class="b overflow-ellipsis">NAME</span><span>(v)</span><span class="note">(n) meters</span></div></div><div class="card sensor-card"><div class="sensor-card-details"><span>(i)</span><span class="b overflow-ellipsis">NAME</span><span>(v)</span><span class="note">(n) meters</span></div></div><div class="card sensor-card"><div class="sensor-card-details"><span>(i)</span><span class="b overflow-ellipsis">NAME</span><span>(v)</span><span class="note">(n) meters</span></div></div><div class="card sensor-card"><div class="sensor-card-details"><span>(i)</span><span class="b overflow-ellipsis">NAME</span><span>(v)</span><span class="note">(n) meters</span></div></div><div class="card sensor-card"><div class="sensor-card-details"><span>(i)</span><span class="b overflow-ellipsis">NAME</span><span>(v)</span><span class="note">(n) meters</span></div></div><div class="card sensor-card"><div class="sensor-card-details"><span>(i)</span><span class="b overflow-ellipsis">NAME</span><span>(v)</span><span class="note">(n) meters</span></div></div></div></div></div><div class="panel subpanel" id="sensor-description-subpanel"><div style="display: flex; flex-direction: row; align-items: center; gap: 10px;"><span>(icon)</span><h2>NAME</h2></div></div></div></div></div>I attempted to create a representative snippet demonstrating the problem.