Javascript 如何将绝对div拉伸到其宽度'；在绝对父母div中时的祖父母

我的html/css结构如下：

<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;
}

...
...
.祖父母{
位置：相对位置；
}
.绝对父母{
宽度：*由JS设置*
高度：30px；
位置：绝对位置；
排名：0；
底部：0；
左：*由JS设置*
溢出：隐藏；
保证金：0自动；
过渡：所有0.5s缓进缓出；
}
.绝对儿童{
对齐项目：居中；
显示器：flex；
弯曲方向：行；
证明内容：中心；
底部：0；
位置：绝对位置；
排名：0；
左：*由JS设置*
保证金：自动0；
过渡：左0.5s缓进缓出；
}

.absolute parent

具有固定的

高度

，而

宽度

和

左侧

位置由javascript根据所选元素在

.row

div中的位置进行设置，它充当绝对子级内容的窗口，该子级内容应与

.row

-div”内容分层

现在，

.absolute child

只能延伸到其内部内容的宽度，我想让它延伸整个容器的宽度

。祖父母

div所以

。absolute child

和

。行

正好在一起

---

干杯！

我能想到的唯一方法是让父div继承父div的with，让子div继承父div的width。但是，父div需要为此设置一个宽度。或者只是手动设置所有div的宽度。这可能不是您期望的答案，但这是我的方法在这种情况下已经使用了很长时间。

因为绝对定位元素是指其位置和大小（如果以百分比定义）的下一个较高相对定位的祖先，只需将

宽度：100%

添加到

。绝对子元素

，使其与

一样宽。祖父母

元素

难道不就是

el.parent.parent.offsetWidth

？@nano有没有办法保持绝对子元素的响应性？现在我使用offsetWidth并在窗口上不断更改它：调整事件大小，但我希望有一种更“自然”的方式进入css@SasemoiCSS在这方面是有限的。试试Sass怎么样？下面是一个很好的例子：