html - CSS Flexible Sticky Header 可能会增长并向下推到元素下方

Question

我正在尝试创建一个 Sticky Header，如果用户在左侧网格中选择更多文档(未图示)，Sticker Header 可以在其中增长(绿色框)。

其他所有内容都应相应地向下推(在蓝色框中)。不确定如何执行此操作，因为所有资源都说粘性 header position:fixed 和正文 padding-top 处于设定数量。

错误 - 现在蓝色的粘性标题正在吞噬绿色框，因为添加了更多文档标题。

下面有3个盒子，黑色是整体容器，绿色是top Sticky Header，蓝色是Body。

粘性标题应该保持不变，而用户向下滚动以阅读长正文。

替代方案:目前在下面使用Javascript，不知道有没有办法严格使用CSS，flexbox，没有Js。

document.getElementById("bluebox-body-id").style.paddingTop = (50 * numberOfDocuments).toString()+ "px";

https://www.w3schools.com/howto/howto_css_fixed_menu.asp

利用 Angular 框架，仅供引用，

Answer 1

如果您更改 position 属性，它将得到解决。

将其更改为粘性:position:sticky