I constantly find myself questioning this.
Whenever we use, for instance, width: 50%, that 50% is in relation to the width of its parent element.
Let's say I have this code:
<div id="root">
<div id="child">
</div>
<div id="child2">
</div>
</div>
and this corresponding CSS:
#root{
width: 200px;
height: 100px;
background-color: red;
}
#child{
width: 50%;
height: 20px;
background: yellow;
}
#child2{
width: 50px;
height: 20px;
background: green;
}
If #root has a width of 200px and #child has a width of 100px...
Could it be possible for the width of #child to be 50% of the width of #child2 (25px), using any CSS property or function?
I am aware that in transform: translate(50%,25%), the 50% relates to the element's own width and 25% to its own height. Is there a way to access the width or height of other elements with a function?
Thank you!