Html CSS：调整div大小以适应绝对定位的内容

我很难让一个div（#播放列表为蓝色）调整大小以适应另一个div（.clipdiv为粉色）

下面的代码显示了我的问题：

html，正文{
背景色：黑色；
保证金：0；
填充：0；
}
身体{
显示：网格；
网格模板列：160px自动；
网格模板行：16px计算（100vh-16px）；
}
.夹子{
背景色：洋红色；
光标：移动；
高度：32px；
外形：1px纯白；
位置：相对位置；
}
克利普迪夫先生{
位置：绝对位置；
身高：100%；
}
#主导航{
背景颜色：绿色；
溢出：滚动；
}
#播放列表{
背景颜色：蓝色；
显示：内联块；
最小宽度：100%；
位置：相对位置；
}
#侧导航{
背景颜色：黄色；
右边框：1px纯白；
溢出：滚动；
填充：8px；
}
#顶置导航{
背景色：红色；
底部边框：2件纯白；
格构柱：1/2跨；
}
.赛道{
边框底部：1px纯白；
显示器：flex；
高度：32px；
位置：相对位置；
宽度：100%；
}

---

根据我的评论，这就是你留在蓝色部门的意思吗？只需确保为粉色div的

左侧位置使用相对值即可


html，正文{
背景色：黑色；
保证金：0；
填充：0；
}
身体{
显示：网格；
网格模板列：160px自动；
网格模板行：16px计算（100vh-16px）；
}
.夹子{
背景色：洋红色；
光标：移动；
高度：32px；
外形：1px纯白；
位置：相对位置；
}
克利普迪夫先生{
位置：绝对位置；
身高：100%；
}
#主导航{
背景颜色：绿色；
溢出：滚动；
}
#播放列表{
背景颜色：蓝色；
显示：内联块；
最小宽度：100%；
位置：相对位置；
}
#侧导航{
背景颜色：黄色；
右边框：1px纯白；
溢出：滚动；
填充：8px；
}
#顶置导航{
背景色：红色；
底部边框：2件纯白；
格构柱：1/2跨；
}
.赛道{
边框底部：1px纯白；
显示器：flex；
高度：32px；
位置：相对位置；
宽度：100%；
}
我最终想出了一个JavaScript攻击，迫使播放列表无限期地继续：


var播放列表；
宽度=0；
函数设置（）{
playlist=document.getElementById（“playlist”）；
playlwidth=playlist.scrollWidth；
}
函数更新宽度（元素）{
playlist.style.width=playlistWidth+elem.scrollLeft+“px”；
}
html，正文{
背景色：黑色；
保证金：0；
填充：0；
}
身体{
显示：网格；
网格模板列：160px自动；
网格模板行：16px计算（100vh-16px）；
}
.夹子{
背景色：洋红色；
光标：移动；
高度：32px；
外形：1px纯白；
位置：相对位置；
}
克利普迪夫先生{
位置：绝对位置；
身高：100%；
}
#主导航{
背景颜色：绿色；
溢出：滚动；
}
#播放列表{
背景颜色：蓝色；
显示：内联块；
最小宽度：100%；
位置：相对位置；
}
#侧导航{
背景颜色：黄色；
右边框：1px纯白；
溢出：滚动；
填充：8px；
}
#顶置导航{
背景色：红色；
底部边框：2件纯白；
格构柱：1/2跨；
}
.赛道{
边框底部：1px纯白；
显示器：flex；
高度：32px；
位置：相对位置；
宽度：100%；
}

很难理解你想要达到的效果。你想让第一个蓝色div位于粉色div的内部吗？对不起，我会尽量解释得更清楚-我正在尝试让蓝色div容纳粉色div。蓝色div太短，因为它们应该是绿色div的宽度。我基本上是在试图阻止蓝色div在末尾截断。粉色div上有一个静态的属性640px，它的位置是绝对的，所以当窗口缩小到小于这个宽度时，粉色div仍然在它的外面。因为它是抽象的，所以仍然很难说出您想要的确切设置，但是如果您将
left
设置为相对值，例如50%，当窗口变小时，它将不会超过蓝色div的宽度。我将制作一个片段，看看这是否是你的意思。粉红色的div代表一个音频剪辑，而蓝色的div代表音频曲目-粉红色的div应该可以自由移动到任何地方（和过去）轨迹-这很困难，因为我希望调整轨迹的大小，无论剪辑在哪里，我希望允许粉色剪辑的左侧位置超过轨迹的宽度，但强制轨迹改变其宽度，使其始终为绿色分区的大小。抱歉，混淆了，我不擅长在该片段中解释，蓝色div始终是绿色div的全宽。这是真的，但是如果粉色div的位置大于蓝色div，它们仍然保持相同的大小-例如，如果clipdiv具有style=“left:640px；”，则蓝色div仍然是相同的宽度如果您希望蓝色div的宽度是动态的，你应该直接改变它们的宽度。如果这是唯一的选择，我将使用JavaScript来调整大小。