Flexbox row pushing columns down - html

Question

I've been using flex layouts for a while now.
mainly the holy grail type layout and it works well.
Today decided to try create the same thing to help me learn more about flexbox.
but using columns on the right side for sidebar area, and rows as the logo/heading and page div's.
I've put this in a codepen so you can see the markup code yourself.
my issue is the logo/heading and main page when set to row pushes the columns downwards.
<div class="wrapper">
<div class="nav">logo content and site banner goes here
<div class="spacer">
</div>
<div class="content">main page content goes here</div>
</div>
<div class="one">page index goes here</div>
<div class="two">twitter logo goes here</div>
<div class="three">chatbox goes here</div>
</div>
div {
box-sizing: border-box;
}
.wrapper {
border: 2px solid blue;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
position: relative;
}
.nav {
flex-direction: row;
border: 2px solid green;
width: 100%;
height: 100px;
align-self: flex-start;
padding-left: 8px;
margin-bottom: 4px;
}
.spacer {
height: 140px;
width: 100%;
}
.content {
flex-direction: row;
border: 2px solid green;
height: 40px;
padding-left: 8px;
align-self: flex-start;
}
.one {
width: 200px;
height: 200px;
border: 2px solid red;
flex-grow: 0;
padding: 8px;
}
.two {
width: 200px;
height: 200px;
border: 2px solid red;
flex-grow: 0;
padding: 8px;
}
.three {
width: 200px;
height: 200px;
border: 2px solid red;
flex-grow: 0;
padding: 8px;
}
https://codepen.io/anon/pen/GmZWvp
even if setting the width to something smaller before it even reaches the columns
the block pushes the columns, down, how could i do this where it doesn't effect the column on the right?
I know i could position: absolute the main page div, or create a nested div in logo/heading
and give it height of say 120px; to get it to go below the logo heading.
But there must be a way of putting a row next to a column without it pushing the column down.
since the div/row for the logo heading/main page is a block element.
If you know how to do this please let me know what to change, where and why etc.
Again this isn't for production, it's just to see if I can solve this quirky puzzle.

Answer 1

First, even if you set display: flex on the wrapper, you can't set flex-direction: row (or column) on its children to change their direction. The flex-direction property should be set on the flex container, in this case the wrapper. If you want to change direction on flex items belonging to one flex container, you need to wrap them and make that nested wrapper be both a flex item and a flex container, here done with the side wrapper in my first sample
If you rearrange your markup a little, you can get this
div {
box-sizing: border-box;
}
.wrapper {
border: 2px solid blue;
display: flex;
}
.nav {
border: 2px solid green;
width: 100%;
height: 100px;
padding-left: 8px;
margin-bottom: 4px;
}
.content {
flex: 1;
border: 2px solid green;
height: 40px;
padding-left: 8px;
}
.side {
width: 200px;
}
.one {
height: 200px;
border: 2px solid red;
padding: 8px;
}
.two {
height: 200px;
border: 2px solid red;
padding: 8px;
}
.three {
height: 200px;
border: 2px solid red;
padding: 8px;
}
<div class="nav">logo and site banner goes here</div>
<div class="wrapper">
<div class="content">main page content goes here</div>
<div class="side">
<div class="one">page index goes here</div>
<div class="two">twitter logo goes here</div>
<div class="three">chatbox goes here</div>
</div>
</div>
If you can't, or don't want, to change markup, then you need to combine flexbox with absolute positioning.
div {
box-sizing: border-box;
}
.wrapper {
position: relative;
display: flex;
flex-direction: column;
}
.nav {
border: 2px solid green;
width: 100%;
height: 100px;
padding-left: 8px;
margin-bottom: 4px;
}
.content {
width: calc(100% - 200px);
border: 2px solid green;
height: 40px;
padding-left: 8px;
}
.one, .two, .three {
position: absolute;
right: 0;
width: 200px;
height: 200px;
border: 2px solid red;
padding: 8px;
}
.one {
top: 104px;
}
.two {
top: 304px;
}
.three {
top: 504px;
}
<div class="wrapper">
<div class="nav">logo and site banner goes here</div>
<div class="content">main page content goes here</div>
<div class="one">page index goes here</div>
<div class="two">twitter logo goes here</div>
<div class="three">chatbox goes here</div>
</div>