Flexbox row pushing columns down

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.

Still not entirely clear. Can you add more details, or post an image of your desired layout. Something like before and after illustrations may help. — Michael Benjamin, Apr 20 '17 at 18:43
i did @Michael_B but the image must of deleted. I've re-added it to the main post. the desired layout is adding content in a row anywhere in the main page area without it pushing the columns down. — GraphiX, Apr 20 '17 at 18:50
@Michael_B i've added the problem image now too. Anything can be altered other than setting the sidebar as colmn the header and page as row. — GraphiX, Apr 20 '17 at 19:10

Asons · Answer 1 · 2017-04-20T20:12:49.123

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>

@GraphiX Added a 2:nd sample, which is the only way if to not touch the markup, and no nesting — Asons, Apr 20 '17 at 20:05
and Mike great work thank you so much guys for your time in looking into this. I've used flex row in everything for so long, was just a quick demo to see if the same could be done with flex column. At least if someone else comes looking for something similar they can now find it as well :) — GraphiX, Apr 20 '17 at 20:43
@GraphiX Could you let me know what is missing in my answer?, so I can adjust and you accept. — Asons, Jun 06 '17 at 04:12

Flexbox row pushing columns down

1 Answers1