Как я могу создать адаптивную панель задач, такую ​​​​как Windows, которая вмещает неограниченное количество кнопок прил ⇐ Html

[Anonymous]

Я создаю интерфейс, подобный рабочему столу, в HTML/CSS и пытаюсь воссоздать панель задач в стиле Windows.
Я хочу, чтобы панель задач вела себя как в Windows:
Когда открыто много окон/приложений, панель задач заполняется кнопками (по одной для каждого экземпляра).
Если добавляется слишком много кнопок, они сжимаются, чтобы поместиться в панели задач, а не переполняют или вытесняют такие вещи, как дата/время. просмотр.
В настоящее время я использую Flexbox для макета, но когда открыто слишком много приложений, содержимое панели задач переполняется, и раздел даты и времени вытесняется из поля зрения вместо того, чтобы все подгонялось.
соответствующая часть HTML:

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

/*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;
}

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

Item1
Item2


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


12:00
24-06-2025

Я знаю, что ответ кроется в свойстве flex, но я не могу должным образом назначить его компоненту, которому оно необходимо для работы такого типа поведения.
Как я могу добиться такого поведения, используя только HTML/CSS?>

Подробнее здесь: https://stackoverflow.com/questions/796 ... pp-buttons