Can someone explain why this happens:
http://codepen.io/mikkolaine/pen/iugho
I don’t wanna use those extra elements to get it working.
2 elements with display: flex (lets call them X and Y for some reason…)
Element X has 2 children with flex: 1
So its 50% and 50%
Element Y has 3 elements. first child has flex: 6, second child has flex: 4 and third child flex: 2
So the first child should be 50% and the 2nd and 3rd child should add up to 50%
That works.
When padding/border is added to the flex-items, it changes the element Y child sizes.
the 1st child is less than 50%
box-sizing doesn’t work.
The only thing I came up was that I should add display: flex to the flex-items and give children with flex: 1 to those.
Is there something I’m missing or is that really the way to do that?
