在粘性容器中放置粘性
我正在尝试使用以下架构来构建应用程序：
页面左侧运行正常；红色的粘性部分已修复，其下方的内容正在滚动。
当我尝试滚动页面右侧时，出现问题。
我不知道如何将overflow-x/y放在正确的（灰色）容器中，并使棕色的div保持“粘”状。
删除灰色div上的overflow-x: auto似乎可以解决问题，但是正确的内容不再包装在页面中。
编辑：
添加了示例。 我建议将其全页打开并在一个较小的窗口中调整其大小，以同时获得两个滚动条（急于完成，抱歉）
<!--
CYAN div should be "stickied" to the main container while scrolling on y axis (as the orange one does)
For the sake of example (to show overflow issues exc...) i've set the width to 50% (in final app should be 100%)
-->
<div style="display: flex;
flex-wrap: wrap; background-color: black; width: 50%; ">
<div style="flex: 0 0 auto; width: 16%; background-color: yellow; ">
<div style="flex: 0 0 auto; width: 100%; position: sticky;
top: 0px;
z-index: 1000; padding-top: 0px;
padding-bottom: 0px;
height: 600px;
font-size: 12px; background-color: orange">
<div style="display: flex;
flex-wrap: wrap;">
<div style="flex: 0 0 auto; width: 100%;">
A
</div>
<div style="flex: 0 0 auto; width: 100%;">
A
</div>
<div style="flex: 0 0 auto; width: 100%;">
A
</div>
<div style="flex: 0 0 auto; width: 100%;">
A
</div>
<div style="flex: 0 0 auto; width: 100%;">
A
</div>
</div>
</div>
<div style="flex: 0 0 auto; width: 100%; background-color: red; height:40px; padding-top: 0px;">
D
</div>
<div style="flex: 0 0 auto; width: 100%; background-color: red; height:40px; padding-top: 0px;">
D
</div>
<div style="flex: 0 0 auto; width: 100%; background-color: red; height:40px; padding-top: 0px;">
D
</div>
<div style="flex: 0 0 auto; width: 100%; background-color: red; height:40px; padding-top: 0px;">
D
</div>
<div style="flex: 0 0 auto; width: 100%; background-color: red; height:40px; padding-top: 0px;">
D
</div>
<div style="flex: 0 0 auto; width: 100%; background-color: red; height:40px; padding-top: 0px;">
D
</div>
<div style="flex: 0 0 auto; width: 100%; background-color: red; height:40px; padding-top: 0px;">
D
</div>
<div style="flex: 0 0 auto; width: 100%; background-color: red; height:40px; padding-top: 0px;">
D
</div>
<div style="flex: 0 0 auto; width: 100%; background-color: red; height:40px; padding-top: 0px;">
D
</div>
<div style="flex: 0 0 auto; width: 100%; background-color: red; height:40px; padding-top: 0px;">
D
</div>
<div style="flex: 0 0 auto; width: 100%; background-color: red; height:40px; padding-top: 0px;">
D
</div>
</div>
<!-- removing overflow-x: auto seems to do the trick but then the right content is not wrapped anymore (look at the black div width) -->
<div style="flex: 0 0 auto; width: 80%; background-color: green; overflow-x:auto; align-self: flex-start;">
<div style="flex: 0 0 auto; width: 100%; position: sticky;
top: 0;
z-index: 1000">
<div style="display: flex; flex-wrap: nowrap !important;
height: 600px !important; ">
<!-- <div *ngFor="let item of columns" style="flex-grow: 1;
flex-basis: 0; min-width: 80px;
max-width: 80px; background-color: cyan">{{item}}</div> -->
<div style="flex-grow: 1;
flex-basis: 0; min-width: 80px;
max-width: 80px; background-color: cyan">B</div>
<div style="flex-grow: 1;
flex-basis: 0; min-width: 80px;
max-width: 80px; background-color: cyan">B</div>
<div style="flex-grow: 1;
flex-basis: 0; min-width: 80px;
max-width: 80px; background-color: cyan">B</div>
<div style="flex-grow: 1;
flex-basis: 0; min-width: 80px;
max-width: 80px; background-color: cyan">B</div>
<div style="flex-grow: 1;
flex-basis: 0; min-width: 80px;
max-width: 80px; background-color: cyan">B</div>
<div style="flex-grow: 1;
flex-basis: 0; min-width: 80px;
max-width: 80px; background-color: cyan">B</div>
</div>
</div>
<div style="flex: 0 0 auto; width: 100%; align-self: flex-start;">
<div style="display: flex; flex-wrap: nowrap">
<div style="display: flex; flex-wrap: nowrap;">
<!-- <div style="flex-grow: 1;
flex-basis: 0; height: 100%; min-width: 80px;
max-width: 80px; background-color: brown" *ngFor="let item of columns">
<div style="display: flex; flex-wrap: wrap; height:100%">
<div style="height: 40px; flex: 0 0 auto; width: 100%" *ngFor="let row of rows">
{{row}}
</div>
</div>
</div> -->
<div style="flex-grow: 1;
flex-basis: 0; height: 100%; min-width: 80px;
max-width: 80px; background-color: brown">
<div style="display: flex; flex-wrap: wrap; height:100%">
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
</div>
</div>
<div style="flex-grow: 1;
flex-basis: 0; height: 100%; min-width: 80px;
max-width: 80px; background-color: brown">
<div style="display: flex; flex-wrap: wrap; height:100%">
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
</div>
</div>
<div style="flex-grow: 1;
flex-basis: 0; height: 100%; min-width: 80px;
max-width: 80px; background-color: brown">
<div style="display: flex; flex-wrap: wrap; height:100%">
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
</div>
</div>
<div style="flex-grow: 1;
flex-basis: 0; height: 100%; min-width: 80px;
max-width: 80px; background-color: brown">
<div style="display: flex; flex-wrap: wrap; height:100%">
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
</div>
</div>
<div style="flex-grow: 1;
flex-basis: 0; height: 100%; min-width: 80px;
max-width: 80px; background-color: brown">
<div style="display: flex; flex-wrap: wrap; height:100%">
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
</div>
</div>
<div style="flex-grow: 1;
flex-basis: 0; height: 100%; min-width: 80px;
max-width: 80px; background-color: brown">
<div style="display: flex; flex-wrap: wrap; height:100%">
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
<div style="height: 40px; flex: 0 0 auto; width: 100%">
C
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
0 个答案:
没有答案
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？