如何在不使用额外 div 的情况下对齐 3 个兄弟元素，2 个左和 1 个右对齐

Question

我正在尝试对齐图像中的 3 个同级元素，有没有办法使用 flexbox 来完成此操作？我以前做过，但没有将它们全部作为兄弟姐妹，我的意思是我曾经将左侧的两个元素包装在一个 div 中，并将右侧的一个元素放在包装器之外，但现在我一直在尝试这样做时不要包装它们中的任何一个以获得更大的灵活性。

规则：

1) 兄弟元素

2) 所有元素都应具有独立的高度，具体取决于内容。

div{
  background: #000;
  color: #fff;
  margin-top: 5px;
  min-height: 50px;
}

<div class="parent">
    <div class="sibling-1">Sibling 1</div>
    <div class="sibling-2">Sibling 2</div>
    <div class="sibling-3">Sibling 3</div>
</div>

Answer 1

你不能在没有限制的情况下做到这一点。

仅使用 CSS 最接近的是，在 parent 上设置一个固定的 height，并为最后一个设置为 100% 的 div 使用包装器。

不过，只要内容的 左侧 高于它将包裹的视口，并且要控制这一点，您将需要一个脚本来调整父母的高度以适应他们的总高度。

附带说明，如果您使用我的这个答案中的技巧，您可以轻松克服使用列包装器的问题：add-scroll-to-each-column-in-css-grid-layout

html, body {
  margin: 0;
}
.parent {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100vh;
  overflow: auto;
}
.wrapper {
  height: 100%;
  width: 50%;
}
.sibling {
  width: 50%;
  background-color: blue;
}
.wrapper .sibling {
  width: 100%;
}
.sibling.nr2 {
  background-color: green;
}
.sibling.nr1 {
  background-color: red;
}

<div class="parent">
    <div class="sibling nr1">
      Sibling 1<br>
      Sibling 1<br>
      Sibling 1<br>
      Sibling 1<br>
      Sibling 1<br>
      Sibling 1<br>
    </div>
    <div class="sibling nr2">
      Sibling 2<br>
      Sibling 2<br>
      Sibling 2<br>
      Sibling 2<br>
      Sibling 2<br>
    </div>
    <div class="wrapper">
      <div class="sibling nr3">
        Sibling 3<br>
        Sibling 3<br>
        Sibling 3<br>
        Sibling 3<br>
        Sibling 3<br>
        Sibling 3<br>
        Sibling 3<br>
        Sibling 3<br>
        Sibling 3<br>
        Sibling 3<br>
        Sibling 3<br>
        Sibling 3<br>
        Sibling 3<br>
        Sibling 3<br>
        Sibling 3<br>
      </div>
    </div>
</div>