css - 多个 sibling ，将某人放在同一行并填充额外的空间

Question

我无法控制 html。我有一个有多个 child 的 parent 。只有其中一些必须在同一行，而其余的不受影响，其中一个必须占用所有额外的空间。内容是自动生成的，% 不是一个选项。

除了内联放置在同一行以避免问题之外的其他选项也是受欢迎的。

.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 box 的父级:

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

display:flex; display:inline-flex; It enables a flex context for all its direct children.

.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的是先行并且应该会自行收缩。

see https://css-tricks.com/all-about-floats/

Aside from the simple example of wrapping text around images, floats can be used to create entire web layouts.

.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>