Javascript 有没有办法获得继承的位置宽度：绝对元素？

这里第二个div被定位为绝对值。第一个div占外部div宽度的60%，但第二个div占整个屏幕宽度的60%。我知道在第一个div中给出position:relative可以解决这个问题。除了给出position:relative之外，还有别的解决方法吗

.outer{
高度：100px；
宽度：100px；
}
.首先{
背景：黑色；
宽度：60%；
颜色：白色；
}
.第二{
位置：绝对位置；
宽度：继承；
背景：黄色；
颜色：黑色；
}

父母亲
小孩

如果外部div有一个定义的宽度，您可以依靠CSS变量定义百分比，继承将按预期工作：

.outer{
高度：100px；
--w:100px；
宽度：var（--w）；
}
.首先{
背景：黑色；
宽度：计算值（0.6*var（--w））；
颜色：白色；
}
.第二{
位置：绝对位置；
宽度：继承；
背景：黄色；
颜色：黑色；
}

父母亲
小孩

如果外部div有一个定义的宽度，您可以依靠CSS变量定义百分比，继承将按预期工作：

.outer{
高度：100px；
--w:100px；
宽度：var（--w）；
}
.首先{
背景：黑色；
宽度：计算值（0.6*var（--w））；
颜色：白色；
}
.第二{
位置：绝对位置；
宽度：继承；
背景：黄色；
颜色：黑色；
}

父母亲
小孩

如果您事先不知道父元素的宽度，可以使用

document.getElementById（'parentID'）.getBoundingRect（）.width来计算其在javascript中的宽度，并使用该值将子元素的大小调整为该值的60%

但是为什么不想在父元素上使用
position:relative

但是为什么不想在父级上使用
position:relative
。是否有任何其他选项可以继承outer div中指定的基于百分比的值，并且所有其他子级都需要继承这些值？这里的宽度100px是示例案例场景，因此这在我的案例中不起作用。是否有任何其他选项可以继承在外部div中指定的基于百分比的值，并且所有其他子级都需要继承这些值？我知道此方法将起作用，而且我更喜欢使用document.getElementById（'parentID'）.offsetWidth而不是使用getBoundingClientRect（）。但是，还有另一种方法可以将提供给父元素的基于百分比的值转换为像素，以便于子元素继承？我知道这种方法可以工作，而且我更喜欢使用document.getElementById（'parentID'）.offsetWidth，而不是使用getBoundingClientRect（）。但是，还有另一种方法可以将提供给父元素的基于百分比的值转换为像素，以便于子元素继承吗？