Layout using Flexbox css

Question

Working on a layout and can't figure it out! I am using flexbox and it's all new to me.

This is what I am trying to achieve. (something like)

And on smaller width something like this

What I have so far in code Html

    <div id="content">
      <section id="profile">

      </section>
      <section id="chat">

      </section>
      <section id="questions">

      </section>
    </div>

Scss

#content {
 display: flex;
 flex-flow: wrap row;
 height: 100%;
}
#content > section {
  flex: 1 100%;
}
#profile {
  background: tomato;
  max-width: 60%;
}
#chat {
  background: deepskyblue;
  max-width: 60%;
}
#questions {
  background: yellowgreen;
}

Result

It doesn't come even close (I know, max-width: 60%). Stuck here, already tried many things, and atm, I am just trying something what doesn't make sense anymore.

Searched a lot but couldn't get there! I was thinking on a flexbox wrapper/container inside a flexbox container/wrapper (?), not sure if this is even possible.

Hope someone can guide me though this, thanks for reading this.

Regards

Answer 1

I've added a .wrap div for the two vertical sections for this to work, it has display:flex and the direction set to column. for the ordering i've used the straightforward order property.

EXAMPLE

HTML:

   <div id="content">


      <section id="profile"> 
          Profile
      </section>

    <div class="wrap">
      <section id="chat">
          Chat
      </section>

      <section id="questions">
        Questions
      </section>
     </div>
   </div>

CSS:

#content {
 display: flex;
 flex-flow: row wrap;
 height: 100%;
  text-align: center;
}
section {
  min-height: 200px;
}

#profile {
  background: tomato;
  width: 40%;
  order:3;
}
#chat {
  background: deepskyblue;
  order:2;
  width: 100%;
}
#questions {
  order:1;
  width: 100%;
  background: yellowgreen;
}

.wrap {
  display:flex;
  flex-flow:column nowrap;
  width: 60%;
}

@media (max-width:700px) {
  #content {
    flex-flow:column nowrap;
  }

  .wrap {
    width: 100%;
  }

  #profile {
    width: 100%;
  }
}