How to size flex-items without percentages?

Question

I am trying to create a flexbox-based grid, with the content being 2/3 width and the side bar the remaining 1/3.

I have used percentages for the width in each col,

Answer 1

in the case of a flexbox, if you set flex:1; to childs, it will spray them evenly.

2 childs = 50% average including margin , bordeers ... 3 childs = 33% average ...

if you have 2 childs, and want 33% / 66% set : flex:1; to one and flex:2; to the other .or flex:33.33 and flex:66.66 if this seems clearer to you :)

examples:

.flex {
  display:flex;
}
div div {
  flex:1;
  padding:0.5em;
  border:solid;
  margin:5px;
}
.f2 {
  flex:2;
}