I am trying to determine why this doesn't work as one would expect:
border:thin solid black;
border:thin solid yellow;
border:thin solid blue;
Making a 2x2 grid while using items of variable height will inevitably result in something that is uneven-looking. The reason why your
holderb tag's children do not obey the
flex: 1 property is because you have not specified how much height the
holderb tag should take up of the parent.
height: 100% to your
holderb tag you can achieve a "grid" that will take up all the space, which might be what you want.
Edit: Okay, this one for sure.