Как я могу сделать адаптивную панель задач, как Windows, которая подходит для неограниченных кнопок приложений без переп ⇐ Html

[Anonymous]

Я строю настольный интерфейс в HTML/CSS и пытаюсь воссоздать панель задач в стиле Windows. Они сжимаются, чтобы вписаться на панели задач, а не переполнение или толкание таких вещей, как дата/время из взгляда.

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

Item1
Item2


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


12:00
24-06-2025



< /code>
Соответствующий CSS: < /p>
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;
}

Я знаю, что ответ лежит в свойстве Flex, но я не могу надлежащим образом назначить его компоненту, который нуждается в нем, чтобы этот вид поведения работал.>

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