How can I make a responsive taskbar like Windows that fits unlimited app buttons without overflowing in HTML/CSS?

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:

<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>

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

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?

Add to the flexed items that you want to shrink a min-width: 0.

In this case, the entire .left-side and also the inner app list ul should have that property. Also, I added flex-shrink: 0 and possible min-width to elements that should keep their width. And finally, padding: 0 for the ul as a final touch.

footer {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: #efebeb;
  flex-wrap: nowrap;
}

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

}

.left-side ul {
  list-style: none;
  display: flex;
  background-color: #ef5e5e;
  height: inherit;
  flex-grow: 1;
  min-width: 0;
  padding: 0;

}

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

  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 160px;
  min-width: 40px;
}

.left-side ul li button {
  font-size: 1.5rem;
  padding-inline: 0.5rem;
  height: inherit;
  max-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;
}

#start-menu,
#date-time-section {
  flex-shrink: 0;
  display: block;
  min-width: 50px;
}

<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>
      <li><button>App 3</button></li>
      <li><button>App 4</button></li>
      <li><button>App 5</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>