How to make an element the same width as the content in flexbox?

Question

css

There is a menu on flex:

<ul>
  <li>Itemitemitemitemitem itemitemitemitemitem 1</li>
  <li>Itemitem 2</li>
  <li>Itemitem 3</li>
  <li>Itemitem 4</li>
  <li>Itemitem 5</li>
</ul>

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
li {
  float: left;
  margin: 2px;
  padding: 5px 10px;
  background: #E1E1E1;
}

https://jsfiddle.net/xandeadx/fLj9s3ug/14/
When the elements do not have enough width, the text in them is wrapped on a new line and the following picture is obtained: The

question is how to make long elements correctly calculate the width (without prescribing the width of individual elements) :

Answer 1

I will suggest adding for li flex:1
https://jsfiddle.net/ucsox3m8/

Answer 2

if i understand correctly,

li:first-child{
    white-space: nowrap;
}

https://jsfiddle.net/kbag0j9h/

Answer 3

Look here https://codepen.io/Natalia_ai_ivanova/pen/JjjaRjg