Content is inside Container, and Container is Content's parent. Content has a width of 100%. What exactly does that mean though? It means that Content's width should be equal to 100% of it's parent's width. That is three separate values, but under current CSS rules, we only can change the first. The second is locked into Parent, and the third is locked into being the same as the value being specified.
Imagine for a moment if the user wanted to make a flexible grid of squares, for a mobile phone. A container, set to 100% width of the screen, and then inside of it, three squares, each 28%, with margin-left of 4%.
Height and width are both set to 28%. But the panels aren't square. This is because you want both width and height to be 28% of the parent's width, and right now height is set to 28% of the parent's height. Looking around, there is no way to change this as of now, so here is my proposal.
Height: valueof location value
Ex: Height: 28% auto width;
An added benefit is full backwards compatibility. Old browsers would ignore the second two values, and browsers that support the new rule will set any blanks to auto, so all old code will function exactly as it does today.
I'm not sure how one goes about submitting a new rule proposal to be added to CSS, so if anyone knows, please comment and let me know. Also, if you have concerns or suggestions about the proposal, please let me know as well.