css - 在弹性容器中放置粘性

Question

我正在尝试使用以下架构构建应用程序：

页面左侧正常；红色的粘性部分是固定的，它下面的内容滚动得很好。

当我尝试滚动页面的右侧时出现问题。我不知道如何设法使overflow-x/y右侧（灰色）容器和褐色 div 都“粘”起来。

删除overflow-x: auto灰色 div 上的 似乎可以解决问题，但是正确的内容不再包含在页面中。

编辑：

添加了示例。我建议在整页中打开它并在较小的窗口中调整它的大小，以便同时滚动（匆忙完成，抱歉）

<!-- 
  
  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>

标签： cssflexboxoverflowsticky