How can I stretch an absolute div to the width of it's grandparent while inside an absolute parent div

Question

My html/css is structured like this:

<div class="grandparent">
  <div class="row">...</div>
  <div class="absolute-parent">
    <div class="absolute-child">...</div>
  </div>
</div>

.grandparent {
  position: relative;
}

.absolute-parent {
  width: *gets set by JS*
  height: 30px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: *gets set by JS*
  overflow: hidden;
  margin: 0 auto;
  transition: all 0.5s ease-in-out;
}

.absolute-child{

  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: center;
  bottom: 0;
  position: absolute;
  top: 0;
  left: *gets set by JS*
  margin: auto 0;
  transition: left 0.5s ease-in-out;
}

.absolute-parent has a fixed height while width and left position get set by javascript depending on the position of a selected element in .row div, it serves as window to absolute-child's content which should be layered with .row -div" content.

Right now .absolute-child only stretches as wide as the content inside of it, I'd like to make it stretch the whole container width of .grandparent div so .absolute-child and .row are right on top of one another.

Cheers !

Answer 1

The only way I can think of, is making the parent div inherit the with of the grand-parent, and making the child inherit the width of the parent. But, the grand parent needs to have a set width for that. Or just setting manually the width of all those divs. It may not be the answer you are expecting, but that is the method I have been using in such situations for a long time.

Answer 2

Since an absolutely positioned element refers to its next higher relatively positioned ancestor for its position and size (if defined in percentage), it should work to simply add width: 100% to .absolute-child to make it as wide as the .grandparent element