flex-shrink does not update item width - css

Question

Update: I think there is no easy solution to this if I have to use flexbox. I'll just use "flex-shrink: 0" and use media queries to adjust the design. Anyway, thanks for your help.
I have got a horizontal list (display: flex) with multiple elements. When I reduce the window size the list elements start to shrink. Unfortunately, the width of the elements nearly stays the same. The li-elements take up too much space. I want the li-element's size to fit the content. If I add "flex-shrink: 0" to the li-element the width is right, but I need this word-wrap.
How to fix this?
With flex-shrink: 0
With flex-shrink: 1
#categories ul {
border-top: 1px solid lightgrey;
display: flex;
margin: 0 0 -1px 0;
padding: 7px 0 0 0;
}
#categories li {
padding: 0 0 7px 0;
margin-right: 15px;
list-style-type: none;
}
<nav id="categories">
<ul>
<li><a href="#">
Thanks & regards,
Mark

Answer 1

Remember that the flex-shrink property sets the flex-shrink of a flex container item. So the items will shrink to fit the container if they are larger than the container's size. In your case, I think that setting flex-shrink to 2 would make the word-wrap as you requested. Check this code snippet. I hope it helps!
function myFunction(val) {
document.getElementById("example-element").style.flexShrink = val;
}
* {
font-family: arial;
}
.buttons-section {
display: flex;
justify-content: space-evenly;
width: 70%;
}
.example-container {
background-color: #eee;
border: .2em solid;
padding: .75em;
border-radius: 10px;
width: 70%;
margin-left: 20px;
max-height: 300px;
display: flex;
}
.example-container>div {
margin: 10px;
}
.first-solution>div {
background-color: rgba(0, 255, 0, 0.2);
border: 3px solid green;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 300px;
}
p {
margin-left: 20px;
}
small {}
.second-solution {
flex: 1 1 0;
justify-content: space-evenly;
}
.second-solution>div {
background-color: rgba(255, 0, 0, 0.2);
border: 3px solid red;
text-align: center;
}
.third-solution {
flex-wrap: wrap;
}
.third-solution>div {
background-color: rgba(0, 0, 255, 0.2);
border: 3px solid blue;
flex-basis: 100px;
text-align: center;
}
<section class="buttons-section">
<div>
<pre><code>flex-shrink: 0;</code></pre>
<button type="button" onclick="myFunction(0)" aria-hidden="true">Apply
</button>
</div>
<div>
<pre><code>flex-shrink: 1;</code></pre>
<button type="button" onclick="myFunction(1)" aria-hidden="true">Apply
</button>
</div>
<div>
<pre><code>flex-shrink: 2;</code></pre>
<button type="button" onclick="myFunction(2)" aria-hidden="true">Apply
</button>
</div>
</section>
<br>
<div>
<section>
<div class="example-container first-solution">
<div id="example-element">I shrink</div>
<div id="example-element">Item Two</div>
<div id="example-element">Item Three</div>
</div>
</section>
</div>
<p>Added more examples after the first comment. Feel free to resize the screen to see the behaviour😉</p>
<p>All elements same size, container with flex: 1 1 0;<br>
<small>Added <b>justify-content: space-evenly;</b> which helps to distribute the extra free space </small>
</p>
<div>
<section>
<div class="example-container second-solution">
<div>Item one</div>
<div>Item Two</div>
<div>Item Three</div>
</div>
</section>
</div>
<p>Suggestion: using flex-wrap: wrap; on the container so the items will always fit the container</p>
<div>
<section>
<div class="example-container third-solution">
<div>Item one</div>
<div>Item Two</div>
<div>Item Three</div>
</div>
</section>
</div>

Answer 2

Can you paste your code here so we can see more info about your problem. Also did you try with flex-grow property?