CSS positioning with flex of divs in different orders

Question

I'm trying to get a particular css layout using Flexbox (as a fallback to a css grid layout), but actually I'm not sure if it's even possible to obtain what I have in mind.

I have the following HTML structure:

<div class="container">
    <div class="div1">DIV 1</div>
    <div class="div2">DIV 2</div>
    <div class="div3">DIV 3</div>
</div>

And this is what I'm trying to realize (qute easy with css grid):

In addition to that I'd like that divs 1 and 3 to be fixed on scroll and the div2 content to be scrollable.

I just wonder if it's even possible to get this done; I have tried many flex settings but I can't get it.

Answer 1

If your container has a fixed height (I'm assuming it is 100% of the viewport), you can use column direction with wrap and order to achieve your layout:

html, body {
  margin:0;
  height:100%;
  color:white;
}
.container {
  height:100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.div1,
.div3 {
  height: 50%;
  width: 30%;
}

.div1 {
  background: red;
}

.div2 {
  max-height:100%; /* make overflow scroll */
  overflow:auto;
  flex-grow: 1;  /* make div fill height */
  width: 70%;
  order: 3;      /* put this div at the end */
  background: grey;
}

.div3 {
  order: 2;       /* put this div below div1 */
  background: blue;
}

<div class="container">
  <div class="div1">DIV 1</div>
  <div class="div2">DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br>DIV 2<br></div>
  <div class="div3">DIV 3</div>
</div>