Html 如何使固定位置div继承弹性大小的父对象的宽度？

我有一个两个flexbox大小的div设置，其中一个我有一个设置为位置固定的标题。如何使其宽度为父对象的100%？无论其宽度如何，它都需要留在父级内部。谢谢

.block1{
身高：102.5%；
边际：0px；
填充：0px；
弹性基准：35%；
柔性生长：1；
弹性收缩：1；
位置：相对位置；
溢出：滚动；
背景色：白色；
外形：纯红1px；
}
.区块2{
外形：纯红1px；
身高：102.5%；
边际：0px；
填充：0px；
弹性基准：65%；
柔性生长：1；
弹性收缩：1；
位置：相对位置；
溢出：滚动；
背景色：白色；
}
.标题{
位置：固定；
背景色：红色；
宽度：100%；
z指数：2；
}
.集装箱{
宽度：100%；
身高：70%；
显示器：flex；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
边际：0px；
轮廓：纯蓝1px；
}

ff
ff
ff

尝试将“header”类的位置从“相对”更改为“绝对”。

---

如果这没有帮助，您可以提供一些模型吗？

您需要为

位置：fixed

元素创建一个新的包含块。默认情况下，使用

position:fixed

将该元素从文档流中拉出，并将其相对于视口建立的初始包含块（即

）进行定位：

该元素将从正常文档流中删除，并且不会在页面布局中为该元素创建空间。它相对于视口建立的初始包含块进行定位，除非它的一个祖先的“变换”、“透视”或“过滤器”属性设置为“无”（请参见CSS Transforms规范），在这种情况下，该祖先的行为与包含块相同。（请注意，浏览器与透视图和过滤器之间存在不一致，导致包含块形成。）其最终位置由“顶部”、“右侧”、“底部”和“左侧”的值确定

此值始终创建新的堆叠上下文。在打印文档中，元素在每页上放置在相同的位置

我继续更新了您的代码片段，以说明：

.block1{
身高：102.5%；
边际：0px；
填充：0px；
弹性基准：35%；
柔性生长：1；
弹性收缩：1；
位置：相对位置；
溢出：滚动；
背景色：白色；
外形：纯红1px；
/*必须成为位置的包含块：固定子对象*/
变换：translate3d（0,0,0）；
}
.区块2{
外形：纯红1px；
身高：102.5%；
边际：0px；
填充：0px；
弹性基准：65%；
柔性生长：1；
弹性收缩：1；
位置：相对位置；
溢出：滚动；
背景色：白色；
}
.标题{
位置：固定；
背景色：红色；
宽度：100%；
z指数：2；
}
.集装箱{
宽度：100%；
身高：70%；
显示器：flex；
显示：-网络工具包盒；
显示器：-moz盒；
显示：-ms flexbox；
显示：-webkit flex；
边际：0px；
轮廓：纯蓝1px；
}

ff
ff
ff

脏活区 这取决于固定div包含扩展其宽度的文本时的情况

如果像下面这样用长文本添加到.header div，它应该可以完成这项工作

<div style="height: 0; overflow: hidden">
  Lorem ipsum dolor sit amet, ...
</div>

我爱你，我爱你。。。

---

你想做的事情行不通，你需要重新考虑你的页面结构。按设计设置样式时，固定位置图元将从其父上下文中删除。您需要一个外部容器来指定两个元素的宽度以实现此目的。您能解释一下吗？我知道已经两年了，但我尝试了您的解决方案，并使用

transform:translate3d（0,0,0），该块不再是“固定”的，当我滚动时会继续移动。。。