Как в flexbox сделать ширину элемента равной ширине контента?

Question

[andead]

Есть меню на флексах:

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

Когда элементам не хватает ширины текст в них переносится на новую строку и получается такая картина:



Вопрос - как сделать так, чтобы длинные элементы правильно рассчитывали ширину (не прописывая ширину отдельных элементов):

Answer 1

[Ice]

предложу добавить для li flex:1
https://jsfiddle.net/ucsox3m8/

Comments

[andead]

тогда элементы будут занимать всё пространство при большой ширине экрана, а надо чтобы они к друг другу прижимались

Answer 2

[Игорь]

если я правильно понял, так

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

https://jsfiddle.net/kbag0j9h/

Comments

[andead]

перенос по словам как раз нужен

[Игорь]

andead, тогда как писали выше, для первого элемента li задайте flex-grow :1, а что бы его не сильно растянуло задайте max-width. По другому наверное никак

Answer 3

[Natalia ivanova]

Посмотрите здесь https://codepen.io/Natalia_ai_ivanova/pen/JjjaRjg

Comments

[andead]

ничего не изменилось