余分なdivを使用せずに3つの兄弟要素を整列する方法、左に2つ、右に1つ

Question

私は3つの兄弟要素をイメージのように整列しようとしていますが、フレックスボックスでこれを達成する方法はありますか？私はそれを前にやったことがありますが、それらのすべてを兄弟として持つことなく、私はdivの左側にある2つの要素をラップの外側の右側に置きますが、今はそれらのいずれかをラップすることなく、より柔軟性を持たせなければなりません。

ルール：

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を設定し、最後のdivのラッパーを高さ100％に設定することです。

の左側のがビューポートより高くなるとすぐに、ラップして、その高さに合わせて親の高さを調整するスクリプトが必要になることを制御します。サイドノートとして

、あなたは私のこの回答のようにトリックを使用している場合、あなたは簡単に列ラッパーが使用されている問題を克服することができます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>