Html 100%宽度的固定位置元素超出父容器

我希望

display:flex

和

position:fixed

的宽度与其父级相同。但是，我的以下代码超出了父容器

这是我已经尝试过的。请检查下面的小提琴

.container{
宽度：400px；
填充物：5px；
背景色：红色；
}
.flex{
显示器：flex；
位置：固定；
高度：100px；
宽度：100%；
背景：粉红色；
}

---

使用

位置：粘滞

*{
保证金：0；
填充：0；
框大小：边框框；
}
：：之前，
：：之后{
框大小：继承；
}
.集装箱{
宽度：400px；
高度：200vh；
填充：0 5px；
背景：线性梯度（红色、蓝色）；
}
.flex{
显示器：flex；
位置：粘性；
排名：0；
高度：100px；
背景：粉红色；
}

除了<代码>位置：粘贴 >可以考虑<代码>继承< /代码>，如果父级总是有一个宽度定义为长度，而不是百分比：

.container{
宽度：400px；
填充物：5px；
背景色：红色；
}
.flex{
显示器：flex；
位置：固定；
高度：100px；
宽度：继承；
背景：粉红色；
}

位置：fixed
基本上告诉您的元素忽略除窗口之外的所有父元素。@Adam我理解，但如何使其与flex Box一起工作。FlexBox新手。欢迎使用堆栈溢出！请澄清您的具体问题或添加其他详细信息，以突出显示您所需的内容。正如当前编写的那样，很难准确地说出您的要求。您不能使用
position:fixed
，因为它将忽略父容器。我们需要知道为什么需要使用
position:fixed
。这不是你想要的，这是你做的，你不喜欢结果。解释你的目标
宽度；100%
将变得无用Sticky似乎没有提供相同的结果。在滚动其余内容时，它不会将.flex粘贴到屏幕上。@so\u用户这正是它所做的。
.flex
正在移动吗？不…这似乎解决了问题。正如你所看到的，它可以滚动所有内容，包括.flex。它在您的解决方案中确实有点移动。我们怎样才能阻止它？