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

Question

我正在尝试对齐像图像中的3个兄弟元素，有没有办法用flexbox完成这个？我之前已经完成了它，但没有将它们全部作为兄弟姐妹，我的意思是我曾经将div中左边的两个元素包裹起来，然后将它放在包装器外面的右侧，但现在我一直在努力如果没有包装它们中的任何一个就可以有更大的灵活性。

规则：

1）兄弟元素

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

my/package/Foo.class

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

Answer 1

如果没有一些限制，你就无法做到这一点。

与CSS最接近的是在height上设置固定的parent，并使用最后div设置的包装为100％的高度。

但是，只要内容的左侧高于视口，它就会换行，并控制您需要一个调整父级高度以适应其总数的脚本高度。

作为旁注，如果您使用我的答案中的技巧，您可以轻松克服使用列包装器的问题：add-scroll-to-each-column-in-css-grid-layout

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;