Как разделить на равные части динамическое количество детей для flex?

Question

[lexstile]

Можно ли через css прописать стили таким образом, чтобы дочерние элементы всегда имели одинаковую ширину и занимали 100% контейнера?
Если 2 элемента - имели ширину по 50%, если 3 элементы - по 33.33% и т. д.

<div class="flex">
	<div class="flex-item"></div>
	<div class="flex-item"></div>
</div>

<div class="flex">
	<div class="flex-item"></div>
	<div class="flex-item"></div>
	<div class="flex-item"></div>
</div>

Как мне показалось, этот вариант больше похож на костыль:

:first-child:nth-last-child(2),
  :first-child:nth-last-child(2) ~ & {
    width: 50%;
  }

  :first-child:nth-last-child(3),
  :first-child:nth-last-child(3) ~ & {
    width: 33.33333%;
  }

Comments

[godsplane]

display:flex ?

[lexstile]

godsplane, элементы не на всю ширину контейнера.

[Ankhena]

lexstile, https://developer.mozilla.org/ru/docs/Web/CSS/flex-grow
но, логично, до тех пор, пока нет контента..

Answer 1

[DivineDraft]