Создание набора встроенных div, которые расширяют их ширину, чтобы заполнить их родителя, но которые также ломаются, чтобы сформировать новую линию, когда их минимальная ширина достигнута

Question

это мой первый пост здесь,

Мне нравится вызов html, но я понятия не имею по этому вопросу, и я надеялся получить некоторую помощь.Заранее благодарю всех желающих.

Итак, я просто хочу создать набор встроенных элементов div / кнопок, которые расширяют их ширину до полного родительского элемента div.Это относительно просто, с приведенным ниже кодом (который я нашел в stackoverflow):

<div class="btn-holder">
  <button type="button">Button 1</button>
  <button type="button">Button 2</button>
  <button type="button">Button 3</button>
</div>
<div class="btn-holder">
  <button type="button">Button 1</button>
  <button type="button">Button 2</button>
  <button type="button">Button 3</button>
  <button type="button">Button 4</button>
  <button type="button">Button 5</button>
  <button type="button">Button 6</button>
  <button type="button">Button 7</button>
  <button type="button">Button 8</button>
  <button type="button">Button 9</button>
  <button type="button">Button 10</button>
  <button type="button">Button 11</button>
  <button type="button">Button 12</button>
</div>

<style>
.btn-holder {
  display: flex;
}

.btn-holder button {
  flex-grow: 1;
  min-width: fit-content;
}
</style>

Этот код в основном подходит для первого примера только из трех кнопок.Но когда есть 12 кнопок, они все переполняют или переполняют родительский div, поскольку он использует только одну строку.

Мои потребности действительно требуют, чтобы кнопки имели минимальную ширину 'fit-content', иродительский div должен разбиваться на вторую или третью строку, если это имеет смысл.

Самое близкое, к чему я могу прийти - это просто 'text-align: justify;'кнопки - но я не вижу, как «согнуть-вырастить» кнопку.

<style>
.btn-holder {
  text-align: justify;
}

.btn-holder button {
  min-width: fit-content;
  width: maximize-to-fill-parent; /* Imaginary command */
  display: inline-block;
}
</style>

Есть ли гении, которые могут найти решение?Ура, если так!

Answer 1

Применение flex-wrap: перенос к содержащему div решает проблему.

.btn-holder {
  display: flex;
  flex-wrap: wrap
}

.btn-holder button {
  flex-grow: 1;
  min-width: fit-content;
}

<div class="btn-holder">
  <button type="button">Button 1</button>
  <button type="button">Button 2</button>
  <button type="button">Button 3</button>
</div>
<div class="btn-holder">
  <button type="button">Button 1</button>
  <button type="button">Button 2</button>
  <button type="button">Button 3</button>
  <button type="button">Button 4</button>
  <button type="button">Button 5</button>
  <button type="button">Button 6</button>
  <button type="button">Button 7</button>
  <button type="button">Button 8</button>
  <button type="button">Button 9</button>
  <button type="button">Button 10</button>
  <button type="button">Button 11</button>
  <button type="button">Button 12</button>
</div>