CSS-оболочка подэлементов, таких как элементы списка

Question

У меня есть фиксированная структура HTML. Я не могу редактировать в этом случае. Я использую flex. У меня есть элементы списка с текстом: «некоторый текст», и я обертываю его с помощью flex. Ребенок «Что-то еще» не упаковывает, как я хочу. Как мне обернуть элементы с красной рамкой, как обычные элементы списка?

Вот изображение, где вы можете увидеть мою проблему: (последняя строка) https://i.imgur.com/kd0P4XK.png

.list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.border {
  border: 1px solid black;
}

.border-group {
  border: 2px solid red;
}

.sub-item {
  display: inline-block;
}

<div class="list">
  <div class="item border">SOME TEXT</div>
  <div class="item border-group">
    <div class="sub-item border">SOMETHING ELSE</div>
    <div class="sub-item border">SOMETHING ELSE</div>
  </div>
  <div class="item border">SOME TEXT</div>
  <div class="item border">SOME TEXT</div>
  <div class="item border">SOME TEXT</div>
</div>

Я хочу обернуть элементы "что-то еще", такие как элементы "некоторый текст".

Answer 1

Я нашел решение. .border-group { display: contents }

display: content означает, что div не генерирует никаких блоков, поэтому его фон, границы и отступы не отображаются. Однако унаследованные свойства, такие как цвет и шрифт, оказывают ожидаемое влияние на дочерний элемент (элемент span). (https://css -tricks.com / get-ready-for-display-contents / )

Мне не нужна граница, поэтому мне достаточно.

Answer 2

Так что самым простым решением для этого было бы удалить тег div "item border-group" и затем просто добавить класс "border-group" к тегам div внутри него. Как то так -

<div class="list">
 <div class="item border">SOME TEXT</div>
 <div class="sub-item border-group">SOMETHING ELSE</div>
 <div class="sub-item border-group">SOMETHING ELSE</div>
 <div class="item border">SOME TEXT</div>
 <div class="item border">SOME TEXT</div>
 <div class="item border">SOME TEXT</div>
</div>