width vs. flex-basis: [width] - elements get expanded?

Question

My code and image show the problem: I want to have flex items of the same percentage width, that won't get expanded, no matter what. Overflow of text is avoided by breaking long words, so basically there's no need to expand any items.

Nevertheless in the second example the item containing a very long word is expanded, although I expected that flex: 0 0 25%; would do the same like flex: 0 0 auto; with a separate width: 25%; declared - but obviously it's not. What am I missing here?

And is there a way to achieve this without declaring a percentage width, for cases with an unknown number of items? (of course the percentage width doesn't make sense in this testcase because of the 400px div, but eventually all widths would of course be flexible, related to the viewport width.)

* {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 16px/1.5 Arial, sans-serif;
  box-sizing: border-box;
}

body {
  padding: 20px;
}

p {
  padding: 40px 0 3px;
}

div {
  width: 400px;
  background: rgb(100, 100, 100);
  padding: 20px;
}

ul {
  display: flex;
}

li {
  background: rgb(222, 222, 222);
  border: 1px solid #000;
  text-align: center;
  padding: 5px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

li+li {
  border-left: none;
}

ul#ul1 li {
  width: 25%;
  flex: 0 0 auto;
}

ul#ul2 li {
  flex: 0 0 25%;
}

<p>width: 25%;<br> flex: 0 0 auto;</p>

<div>
  <ul id="ul1">
    <li>hello</li>
    <li>hello</li>
    <li>helloworldhelloworldhelloworld</li>
    <li>hello</li>
  </ul>
</div>

<p>flex: 0 0 25%;</p>

<div>
  <ul id="ul2">
    <li>hello</li>
    <li>hello</li>
    <li>helloworldhelloworldhelloworld</li>
    <li>hello</li>
  </ul>
</div>

this image shows the problem