I am building a desktop-like interface in HTML/CSS and trying to recreate a Windows-style taskbar.
I want the taskbar to behave like in Windows:
When many windows/apps are open, the taskbar fills up with buttons (one for each instance).
If too many buttons are added, they shrink to fit within the taskbar instead of overflowing or pushing things like the date/time out of view.
Currently, I'm using Flexbox for layout, but when too many apps are opened, the taskbar content overflows, and the date/time section gets pushed out of view instead of everything adjusting to fit.
relevant part of the 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;}<footer><div id="start-menu"><div>Item1</div><div>Item2</div></div><div class="left-side"><button id="start-button">START</button><ul><li><button>App 1</button></li><li><button>App 2</button></li></ul></div><div id="date-time-section"><button><h2 id="taskbar-time">12:00</h2><h2 id="taskbar-date">24-06-2025</h2></button></div></footer>I know the answer lies in the flex property but I can't seem to appropriately assign it to the component that needs it for this kind of behaviour to work.
How can I achieve such a behaviour using only HTML/CSS?