https://drafts.csswg.org/css-values-4/#relative-lengths

I think we need two new units: rw and rh.

As component based programming such as Vue.js gets more and more popular, there are needs that we want to build a responsive component which can scale larger or smaller but maintain a fixed layout (the ratio of all the inner elements been kept same). In the component, using percentages can solve some sort of these needs. But the font-size won't scale and there are some other problems. What I thought about is vw and vh, which can make all the elements inside the document scale together when the viewport scales. What's more, it's hard to make an element's aspect ratio to be fixed which is in an element that doesn't have a fixed aspect ratio, but rw and rh would make it much easier.
Rather than viewport, the rw and rh means the relative width and height relative to it's relative container. For example, #parent{position: relative} #parent>#child{width: 20rw; height: 100rh; font-size: 10rh; line-height: 10rh} means child's width is 20% width of the parent, and the text's size in child is 10% height of the parent, then there can be 10 lines in the child occupy 20% width in the left whatever the parent's size is.