Cannot make flex display work

Question

I will present to you what I want to do in an image to see better...

1: header to take the same space as content.

2: "aside-1", "content" and "aside-2" to be horizontally aligned at their top.

#flex{
  display:flex;
  flex-wrap: wrap;
}

aside{
  max-width: 300px;
}

<div id='flex'>
  <header id='header'>
  </header>
  
  <aside id='aside-1'>
  </aside>
  
  <content id='content'>
  </content>
  
  <aside id='aside-1'>
  </aside>
  
 </div>

P.S. I can done if I put another 2 divs in the left and right of heading... that will take the same space as header... but I want to make it without that divs.

I want solutions with Css/html.

Thanks !

Answer 1

Here is a couple of versions using pseudo elements

Sample 1, where I only added an extra div inside the header

.flex {
  display: flex;
  flex-wrap: wrap;
}
.header {
  width: 100%;
  display: flex;
}
.header::before,
.header::after {
  content: ' ';
  flex: 1;
  max-width: 300px;
}
.header > div {
  flex: 2;
  background: lightblue;
}

.content {
  flex: 2;
  background: lightgreen;
}
aside {
  flex: 1;
  max-width: 300px;
  background: lightblue;
}

<div class='flex'>
  
    <header class='header'>
      <div>head<br>head<br></div>
    </header>
  
    <aside class='aside-1'>left
    </aside>

    <content class='content'>content<br>content<br>content<br>content<br>
    </content>

    <aside class='aside-1'>right
    </aside>
  
</div>

Sample 2a, where I added an extra div around both the header and the aside/content

.flex {
  display: flex;
}
.header {
  flex: 2;
  background: lightblue;
}
.content {
  flex: 2;
  background: lightgreen;
}
.pad::before,
.pad::after {
  content: ' ';
  flex: 1;
  max-width: 300px;
}
aside {
  flex: 1;
  max-width: 300px;
  background: lightblue;
}

<div class='flex pad'>
    <header class='header'>head<br>head<br>
    </header>
  </div>
  
  <div class='flex main'>  
    <aside class='aside-1'>left
    </aside>

    <content class='content'>content<br>content<br>content<br>content<br>
    </content>

    <aside class='aside-1'>right
    </aside>
  </div>

Sample 2b, here with a wrapper to make it fill viewport height

html, body {
  margin: 0;
}
.wrapper {                  /*  wrapper: make it all fill viewport height  */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.flex {
  display: flex;
}
.main {
  flex: 1;                  /*  fill remaining space  */
}
.header {
  flex: 2;
  background: lightblue;
}
.content {
  flex: 2;
  background: lightgreen;
}
.pad::before,
.pad::after {
  content: ' ';
  flex: 1;
  max-width: 300px;
}
aside {
  flex: 1;
  max-width: 300px;
  background: lightblue;
}

<div class='wrapper'>

  <div class='flex pad'>
    <header class='header'>head
    </header>
  </div>
  
  <div class='flex main'>  
    <aside class='aside-1'>left
    </aside>

    <content class='content'>content
    </content>

    <aside class='aside-1'>right
    </aside>
  </div>

</div>

Answer 2

Try this:

HTML structure:

      <div class="flex">
        <header id="header"></header>
      </div>
      <div class="flex">
        <aside id="aside-1" class="flex-1"></aside>
        <content id="content"></content>
        <aside id="aside-2" class="flex-1"></aside>
      </div>

CSS:

.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

#header {
  width: 50%;
  margin-left:25%;
  background: green;
  height:50px;
}

#content {
  flex: 2;
  background: red;
  height: 300px;
}

#aside-1 {
  background: orange;
}

#aside-2 {
  background: blue;
}

(Afterwards remove the background and height attributes, they are just for display.)

Answer 3

I have created a fiddle, have a look at it. I hope this will help. There is no extra divs.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#flex {
  display: flex;
  flex-direction: column;
  background: #ccc;
  width: 100%;
}

#flex .holder {
  display: flex;
  flex-direction: row;
      margin-top: 18px;
}

#flex .holder > * {
  flex: 1;
}

aside {
  max-width: 300px;
}

#header {
  background: #00a652;
  margin-top: -18px;
}

#aside-1 {
  background: #f7941d;
}

#aside-2 {
  background: #00adef;
}

#content {
  background: #ed1b24;
}

<div id='flex'>


  <div class="holder">
    <aside id='aside-1'>
      aside01
    </aside>

    <content id='content'>
      <header id='header'>
        header
      </header>
      Content
    </content>

    <aside id='aside-2'>
      aside02
    </aside>
  </div>

</div>

Click for fiddle Demo