Wie kann ich eine reaktionsfähige Taskleiste wie Windows erstellen, die unbegrenzt viele App-Schaltflächen enthält, ohne ⇐ CSS

[Anonymous]

Ich erstelle eine Desktop-ähnliche Oberfläche in HTML/CSS und versuche, eine Taskleiste im Windows-Stil neu zu erstellen.
Ich möchte, dass sich die Taskleiste wie in Windows verhält:
Wenn viele Fenster/Apps geöffnet sind, füllt sich die Taskleiste mit Schaltflächen (eine für jede Instanz).
Wenn zu viele Schaltflächen hinzugefügt werden, werden sie verkleinert, damit sie in die Taskleiste passen, anstatt überzulaufen oder Dinge wie Datum/Uhrzeit zu verschieben nicht sichtbar.
Derzeit verwende ich Flexbox für das Layout, aber wenn zu viele Apps geöffnet werden, läuft der Inhalt der Taskleiste über und der Datums-/Uhrzeitbereich wird aus der Ansicht verschoben, anstatt dass sich alles anpasst.
relevanter Teil des HTML:

Code: Select all

/*corresponding css:*/
footer {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
height: 100%;
background-color: #efebeb;
}

.left-side {
display: flex;
justify-content: center;
align-items: center;
background-color: #34da34;
height: 100%;
}

.left-side ul {
list-style: none;
display: flex;
background-color: #ef5e5e;
height: inherit;
}

.left-side ul li {
display: flex;
background-color: #d17124;
height: 100%;
align-items: center;
}

.left-side ul li button {
font-size: 1.5rem;
padding-inline: 0.5rem;
height: inherit;
width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: #046467;
color: white;
border: 1px solid #013a3c;
text-align: left;
}

#start-button {
font-size: 2rem;
padding-inline: 1rem;
height: inherit;
background-color: #c5c1c1;
border: 1px solid #8b8c8b;
}

#date-time-section {
height: 100%;
}

#date-time-section button {
font-size: 0.7rem;
height: inherit;
padding-inline: 0.5rem;
padding-block: 0.1rem;
background-color: #c5c1c1;
border: 1px solid #8b8c8b;
}

Code: Select all

Item1
Item2


START
[list]
[*]App 1
[*]App 2
[/list]


12:00
24-06-2025

Ich weiß, dass die Antwort in der Flex-Eigenschaft liegt, aber ich kann sie anscheinend nicht richtig der Komponente zuweisen, die sie benötigt, damit dieses Verhalten funktioniert.
Wie kann ich ein solches Verhalten nur mit HTML/CSS erreichen?