Делаем элемент на 100% шириной его прародителя

Question

Я пытаюсь сделать элемент динамически совпадающим с шириной его дедушки (используя "width: 100%"). Я не могу изменить прародителя, потому что рассматриваемый элемент может быть вставлен в кучу разных мест с разными элементами прародителя. Есть ли способ использовать CSS или SCSS, чтобы элемент соответствовал ширине его прародителя?

Я также не могу просто сделать родительскую ширину: 100% и ширину элемента: 100%, потому что это ломает другие вещи.

Другие решения, уже опубликованные, полагаются на возможность изменить дедушку и не работают в этом случае.

<Grandparent>     //Can't modify grandparent
   <Parent>       //Width is different to that of the grandparent
      <Element/>  
   <Parent/>
<Grandparent/>

Parent {
   width:auto;
}
Element {
   width:100%; //This makes the element the same width as the Parent instead of the Grandparent
}

Answer 1

Решение 1 : добавить абсолютную позицию и ширину 100% для дочернего элемента, без позиции для родителя и позиции относительно деда:

<div class="grandparent"> GrandParent
    <div class="parent"> Parent
        <div class="child"> Child</div>
    </div>
</div>

<style>
    .grandparent {
        position: relative;
        width: 300px;
        background: orange;
    }

    .parent {
        width: 150px;
        background: yellow;
    }

    .child {
        position: absolute;
        width: 100%;
        background: lightgrey;
    }
</style>

Решение 2 : создайте класс и добавьте его к прародителю и ребенку:

<div class="grandparent common-width"> GrandParent
    <div class="parent"> Parent
        <div class="child common-width"> Child</div>
    </div>
</div>

<style>
    .grandparent {
        width: 300px;
        background: orange;
    }

    .parent {
        width: 150px;
        background: yellow;
    }

    .child {
        background: lightgrey;
    }

    .common-width {
        width: 240px;
    }
</style>