Как сделать блоки одного размера?

Question

[test-cats]

Есть блок <div class="div><p>text</p></div>. Блок залит в черный цвет.
Таких блоков на странице несколько в ряд. В них разное кол-во текста. Как сделать, чтобы не смотря на количество текста цвет фона растягивался у блоков и они были одного размера?

Comments

[FeST1VaL]

Круто что у вас есть блок! А конкретнее? Просто зачем нажимать опубликовать и потом редактировать вопросы? Или это вся информация которая доступна?

[Модератор]

https://toster.ru/help/rules
3.8

Answer 1

[Константин Подыганов]

В теге flexbox, поэтому напишу:

.flex-box {
  display: flex;
}

.flex-item {
  width: 100%;
}

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

Итого, 3 блока flex-item одинакового размера, который зависит от ширины flex-box

Comments

[origami1024]

можно сделать 3 блока одинаковых размеров лаконичнее, и с лучшей поддержкой браузеров
<div></div><div></div><div></div>

[Геннадий]

может width: calc(100% / 3)px ?

[Константин Подыганов]

Геннадий, без разницы как по мне, оно все равно автоматически распределяет размеры блоков. Если добавить flex-wrap: wrap, то можно будет использовать как раз calc(100% / 3)px, для создания блоков одинакового размера