How to get width of an element with inheritance-width?

Question

I have a responsive website. In addition, I have several nested elements that used percentages ( % ) for them. Now I want to get the width of the child and set it as the width of another element.

Note. . I can get the width of this element that I need and set it to another using JavaScript (something like this: $('.children')[0].getBBox().width; ). But I want to know if this is possible using pure-CSS?

Here is my HTML structure and CSS codes:

 #grandfather { width: 70%; border: 1px solid #666; padding: 5px; } .father { width: 80%; border: 1px solid #999; padding: 5px; } .children { width 90%; border: 1px solid #ccc; padding: 5px; } .follow-width { position: absolute; border: 1px solid #ccc; padding: 5px; /* width: ? */ } 

 <div id="grandfather"> <div class="father"> <div class="children">how to get the width of this element?</div> </div> </div> <br> <hr> <br> <div class="follow-width"> this element needs to the width of div.children </div> 

Answer 1

No, you cannot do this only in CSS.

But you in Internet Explorer before version 8 were possible:

 width: expression(document.getElementById("grandfather").style.width); 

 #grandfather { width: 70%; border: 1px solid #666; padding: 5px; } .father { width: 80%; border: 1px solid #999; padding: 5px; } .children { width 90%; border: 1px solid #ccc; padding: 5px; } .follow-width { position: absolute; border: 1px solid #ccc; padding: 5px; width: expression(document.getElementById("grandfather").style.width); } 

 <div id="grandfather"> <div class="father"> <div class="children">how to get the width of this element?</div> </div> </div> <br> <hr> <br> <div class="follow-width"> this element needs to the width of div.children </div>