html - 垂直增长元素，同时定位到其他元素的右侧

Question

我搜索了这个问题并找到了一些答案，但他们只是想念我的场景。

情况是元素是动态创建并放入行中的。在每一行中，元素的数量是可变的，所以我不知道它们提前占用了多少水平空间。其中一个我想要占据剩余部分并让它根据需要垂直增长但它的左侧位置保持不变，它应该始终位于其行中其他元素的右侧。这是第二行需要增长的三行的模型:

相反，这是我得到的:

下面是一个简化版本的 html 来说明这个问题:

.container {
  display: block;
  max-width: 600px;
  border: 1px solid black;
}

.fixedPart1 {
  display: inline-block;
  width: 100px;
  vertical-align: top;
  background-color: red;
}

.fixedPart2 {
  display: inline-block;
  width: 200px;
  vertical-align: top;
  background-color: red;
}

.varPart {
  display: inline-block;
  max-width: 500px;
  min-width: 50px;
  background-color: yellow;
}

<div class="container">
  <span class="fixedPart1">Row 1</span><span class="varPart">Text1: This text displays to the right of the red element.</span>
</div>
<div class="container">
  <span class="fixedPart2">Row 2</span><span class="varPart">Text 2: This should display the same as the one above but instead it first moves down to clear the red element.</span>
</div>
<div class="container">
  <span class="fixedPart1">Row 3</span><span class="varPart">This text displays to the right of the red element.</span>
</div>

因为我这里的例子是一个简化，我希望提供的任何解决方案都尽可能接近我在这里发布的内容。任何指导将不胜感激。

Answer 1

像下面这样简单地使用 flexbox:

.container {
  display: flex;
  align-items:flex-start;
  max-width: 600px;
  border: 1px solid black;
}

.fixedPart1 {
  width: 100px;
  background-color: red;
}

.fixedPart2 {
  width: 200px;
  background-color: red;
}

.varPart {
  flex-grow:1;
  min-width: 50px;
  background-color: yellow;
}

<div class="container">
  <span class="fixedPart1">Row 1</span><span class="varPart">Text1: This text displays to the right of the red element.</span>
</div>
<div class="container">
  <span class="fixedPart2">Row 2</span><span class="varPart">Text 2: This should display the same as the one above but instead it first moves down to clear the red element.</span>
</div>
<div class="container">
  <span class="fixedPart1">Row 3</span><span class="varPart">This text displays to the right of the red element.</span>
</div>