Перекрытие элемента внутри относительного позиционного элемента div с автоматическим переполнением с использованием только CSS (без JS)

Question

Я пытаюсь перекрыть элемент, который находится внутри другого div с position relative и overflow auto. Моя цель - наложить этот элемент на родительский div, сохранив точный стиль родительского div и используя только CSS but no JS.

Структура HTML

<div class="parent" style="position: relative; width: 400px; height: 400px; background: red; overflow-x: auto;">
    <div class="children" style="position: relative; width: 800px; height: 200px; background: green;">
        <div class="element" style="position: absolute; width: 50px; height: 750px;"></div>
    </div>
</div>

Мне нужно, чтобы этот element div перекрывал parent div.

Я также делюсь ссылкой codepen, чтобы иметь идею, и если это можно изменить там: Пример Codepen

синяя рамка [ элемент div ] при наведении мыши должна перекрывать все родительские элементы div

Надеюсь, информация, которую я предоставляю, носит пояснительный характер, и если что-то еще понадобится, пожалуйста, дайте мне знать.

---

Еще несколько брифингов:

What's happening что происходит

What's expecting Что ожидает

---

HTML in codepen

.parent {
  position: relative;
  width: 400px;
  height: 400px;
  background: rgba(255, 0, 0, 0.75);
  overflow-x: auto;
}

.children {
  position: relative;
  width: 800px;
  height: 200px;
  background: rgba(0, 255, 0, 0.75);
}

.children:last-child {
  margin-top: 50px;
  position: relative;
  width: 800px;
  height: 100px;
  background: rgba(0, 255, 0, 0.75);
}

.element {
  position: absolute;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 255, 0.75);
  transition: all ease-in-out 0.5s;
  -webkit-transition: all ease-in-out 0.5s;
  z-index: 100;
}

.element:hover {
  height: 700px;
}

<div class="parent">
  <div class="children">
    <div class="element"></div>
  </div>
  <div class="children">
    <div class="element"></div>
  </div>
</div>