How to fix 'overflow: auto' not working as intended? - html

Question

I have made an unsorted list that contains tabs that get created dynamically based on the value of my amount input field. The div of this list has its overflow set to auto to create a scrollbar when too many tabs are created. But for some reason the overflow auto doesn't work as intended.
These pictures show that I can fit a maximum of 21 tabs without a scrollbar. However, as I increase the amount of tabs they get squished together until the 24th tab and only after the 25th has been added the scrollbar appears. (The borders are for visualization purposes and show the dimensions of the div that contains the list as well as the div that contains that div)
These are the respective sections of my HTML and CSS:
#amount-and-tabs-container {
display: flex;
}
.container {
width: 50%;
display: inline-block;
}
#amount-container {
width: 10%;
min-width: 75px;
}
#tabs-container {
width: 100%;
overflow: auto;
border: 1px solid blue;
}
#tabs {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid red;
}
.tab {
cursor: pointer;
text-align: center;
font-weight: bold;
padding: 10px;
margin-left: 20px;
width: 24px;
min-width 24px;
background-image: url("tab.png");
background-size: 100% 100%;
}
.tab.active {
background-image: url("tab_active.png");
}
.tab:hover {
background-image: url("tab_hover.png");
}
<div id="amount-and-tabs-container">
<div class="container" id="amount-container">
<label id="amount-label" for="amount">Amount:</label>
<input type="number" id="amount" value="1" min="1">
</div>
<div class="container" id="tabs-container">
<ul class="tabs" id="tabs"></ul>
</div>
</div>
I have tried to add a width and min-width to the tabs, but it doesn't do anything in regards to this problem. I suspect the cause to be the margin on the tabs, but I am not sure. My leading theory is that the margin gets prioritized above the width.
Answer:
'flex-shrink: 0' fixed this.