Set width of div as width of parent of parent

Question

<div class = "x" style="width:100%;">
    <div class = "y" style="width:50%;float:left;">
        <div class = "z" style="width:100%;">
        </div>
    </div>
    <div class = "yy" style="width:50%;float:right;">
        <div class = "zz" style="width:100%;">
        </div>
    </div>
</div>

Can the width of div of class "z"/"zz" be set to that of div of class "x" through css alone?

UPDATE
The solution is here link (using the answer given below)

Answer 1

You can use the inherit property. The inherit keyword specifies that a property should inherit its value from its parent element.

HTML:

<div class = "x">
   <div class = "y">
       <div class = "z">
       </div>
   </div>
</div>

CSS:

.x
{
width:100px; 
border:1px solid red;
height:100px;
}

.z{
width:inherit; 
border:1px solid green;
height:100px;
}

Here is a Fiddle for the same.

Answer 2

The only way to do that would be to set the parent x to a relative position and the z div to an absolute position

.x{
position: relative;
}
.z{
position: absolute ;
top:0;
left:0;
width:100%;
}

Answer 3

give .x width , then give .z width:inherit; Otherwise, I think you have to set them one by one unless you are going to make box model, make .x be the big box,then put .y and .z in box.

give the .xa width for example is 100%, then give .y as 25px. You may going to use {display:-webkit-box;} and {-webkit-box-flex:1;}attributes.then you can give x .xa max-width number and y 0r z width, the one left will flexible depend on how big your screen is at times.

but as your html you probably have to give the width separately,unless you use box model.

hope this will help you little bit.