Trying to make a grid with flex - css

Question

In my attempts to understand flex i decided i want to make a grid. Here's a general layout image for that:
The idea is that there's
a) a sidebar
b) a sticky header under which the main containers crolls
c) a main container that holds the main data
d) items that are sized depending on their content placed on a grid
To implement the sticky header i created did the following:
<div>
<div class="stickyHeader"></div>
<div class="contentscroll"></div>
</div>
Where
.stickyHeader{
position:absolute;
width:100%;
top:0px;
left:0px;
height:200px;
background-color:rgba(128, 128, 128, 0.178);
}
and
.contentscroll{
overflow: scroll;
height:100%;
display:flex;
box-sizing: border-box;
/* justify-content: flex-start; */
flex-flow:row wrap;
}
The issue is that the flex elements are trying to fill the 100% of the main container and therefore the page looks very different if i've got one item element vs 6 ( meaning that the space between the item elements and the sticky header seems variable when i really want it to be a specific distance.
Thanks a lot, you can find the entire code here:
https://jsbin.com/wivudiqisa/edit?html,css,output

Answer 1

I am not sure, what you mean with "sticky header seems variable" but you can distribute the flex Elements like this:
.contentscroll{
...
justify-content: space-between;
...
}
.contentitemcontainer {
...
width:20%;
...
}
I found this guide helpful: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

The support for Css Grid has greatly improved and you don't need to hack you way into building a grid! It has more than 90% browser support, so let's start using Grids
I have put together an article that covers precisely that and where to use grid and when to use flex here if you want to know more info