Html 仅在右侧扩展和脱离父级的子div 我有一个位于屏幕中间的父容器。我需要子div在左侧以相对和法线对齐，但div的右侧要断开并与屏幕的右侧对齐

例如

我尝试过使用常用的全宽技术：

.child {
  width: 100vw;
  margin-left: -50vw;
  left: 50%;
  margin-right: -50vw;
  right: 50%;
}

然后修改它，这样它就不会从左边消失。但这会导致右侧延伸超过视口的右侧

这是下面的基本结构

正文{
背景色：#dddddd；
填充：0px；
边际：0px；
}
.颜色为白色{
背景色：#ffffff；
}
.border_____黑色{
边框：1px实心#4545；
}
.家长{
位置：相对位置；
宽度：72雷姆；
保证金：0自动；
最大宽度：80vw；
填充：15px；
}
.孩子{
填充：15px；
}

内容

您需要使用

计算来计算悬垂的宽度（对于大于1440px的屏幕尺寸-rem小于80vw的屏幕）：


正文{
背景色：#dddddd；
填充：0px；
边际：0px；
}
.颜色为白色{
背景色：#ffffff；
}
.border_____黑色{
边框：1px实心#4545；
}
.家长{
位置：相对位置；
宽度：72雷姆；
保证金：0自动；
最大宽度：80vw；
填充：15px；
}
.孩子{
填充：15px；
框大小：边框框；
宽度：90vw；/*这只是90vw，因为父级的宽度是80vw，所以将位扩展到边是剩余的20vw/2*/
}
@媒体屏幕和屏幕（最小宽度：1440px）{
.孩子{
宽度：计算（72rem+（（100vw-72rem）/2））；
/*这是父对象的原始72rem宽度加上视口大小减去父对象宽度除以2-窗口和父对象之间的扩展位*/
}
}

内容

正文{
背景色：#dddddd；
边际：0px；
}
.颜色为白色{
背景色：#ffffff；
}
.border_____黑色{
边框：1px实心#4545；
}
.集装箱{
位置：相对位置；
填充：0.10%；
利润底部：5%；
}
.家长{
位置：相对位置；
宽度：100%；
垫面：5%；
高度：100vh；
保证金：0自动；
}
.孩子{
位置：相对位置；
填充：15px 15px；
左缘：5%；
宽度：90%；
框大小：边框框；
}

内容

下面是另一种使用边距的方法：


正文{
背景色：#dddddd；
填充：0px；
边际：0px；
}
.颜色为白色{
背景色：#ffffff；
}
.border_____黑色{
边框：1px实心#4545；
}
.家长{
位置：相对位置；
宽度：72雷姆；
保证金：0自动；
最大宽度：80vw；
填充：15px；
}
.孩子{
填充：15px；
框大小：边框框；
右边距：-10vw；/*（100vw-80vw）/2*/
}
@媒体屏幕和屏幕（最小宽度：1440px）{
.孩子{
保证金权利：计算（（72rem-100vw）/2）；
}
}

内容
不清楚您想要什么。请详细解释。@rarback我添加了一张图片，以帮助大家了解我的要求。您的
家长是否总是
80vw
？还是固定宽度？我想你误解了问题的要求。我添加了一个图像以帮助大家理解。