How to align 3 sibling elements, 2 left and 1 to the right without using extra divs

Question

I'm trying to align 3 sibling elements like in the image, is there a way to accomplish this with flexbox? I've done it before but without having all of them as siblings, I mean I used to wrap the two elements at the left in a div and let the one in the right outside of the wrapper, but now I've been trying to do it without wrapping any of them to have more flexibility.

Rules:

1) Sibling elements

2) All elements should have an independent height, depending on the content.

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>

the main reason is because the elements should have an independent height of each other based on the content. @LGSon — Enmanuel Duran, May 17 '17 at 14:06
Updated my answer, and even if it is not the answer you want, it still answers the question. — Asons, May 17 '17 at 16:36

score 0 · Accepted Answer · edited May 23 '17 at 12:10

You can't do that without some limits.

The closest with CSS only, is to set a fixed height on the parent and use a wrapper for the last div set to a height of 100%.

Still, as soon as the content's left side gets higher than the viewport it will wrap, and to control that you will need a script that adjust the parents height to accommodate their total height.

As a side note, if you use a trick like in this answer of mine, you can easily overcome the issue where a column wrapper is being used: 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>

How to align 3 sibling elements, 2 left and 1 to the right without using extra divs

1 Answers1