Несколько братьев и сестер, поместите несколько в один ряд и заполните дополнительное пространство

Question

У меня нет контроля над HTML. У меня есть родитель с несколькими детьми. Только некоторые из них должны быть в одном ряду, в то время как остальные остаются без изменений, и один из них должен занимать все дополнительное пространство. Контент создается автоматически, а% не поддерживается.

Также приветствуются другие варианты, кроме встроенного для размещения в одной строке, чтобы избежать проблемы.

.parent {
  background: red;
}

.same-row-child {
  background: green;
  display: inline-flex;
}

<div class="parent">
  <div class="other-child">A</div>
  <div class="same-row-child">B</div>
  <div class="same-row-child">C</div>
</div>

Подводя итог: Α в первой строке без изменений. B + C в той же строке, где B занимает все лишнее пространство.

Answer 1

Если идея состоит в том, чтобы использовать flex, то это должно быть родительское поле flex:

https://css -tricks.com / snippets / css / a-guide-to-flexbox /

display:flex; display:inline-flex; Включает гибкий контекст для всех своих прямых потомков .

.parent {
  background: red;
  display: flex;
  flex-wrap: wrap;
}

.other-child {
  width: 100%;
}

.same-row-child {
  background: green;
}

.parent :last-child {
  flex: 1;
  margin-left:2px;
}

<div class="parent">
  <div class="other-child">A</div>
  <div class="same-row-child">B</div>
  <div class="same-row-child">C</div>
</div>

выглядит не как вариант, который вы бы использовали См. Следующий параметр

---

Старый путь - float и overflow, а float - это тот, который стоит первым и должен уменьшаться сам по себе.

см. https://css -tricks.com / all-about-float /

Помимо простого примера обтекания текста вокруг изображений, float можно использовать для создания целых веб-макетов.

.parent {
  background: red;
}

.other-child {}

.same-row-child {
  float: left;
  background: green;
  margin-right: 2px;
}

.parent :last-child {
  float: none;
  overflow: hidden;
  margin: 0;
}

<div class="parent">
  <div class="other-child">A</div>
  <div class="same-row-child">B</div>
  <div class="same-row-child">C</div>
</div>