Поместите липкий внутри гибкого контейнера

Question

Я пытаюсь построить приложение, используя следующую схему:

С левой стороны страницы все в порядке; красная липкая часть зафиксирована, и содержимое под ней прокручивается просто отлично.

Проблема появляется, когда я пытаюсь прокрутить правую часть страницы. Я не знаю, как можно получить и overflow-x/y в правом ( серый ) контейнере, и коричневатый элемент div, который должен быть "прикреплен".

Удаление overflow-x: auto на сером элементе div, кажется, помогает, но тогда правильное содержимое больше не переносится на страницу.

EDIT:

Добавлен пример. Я рекомендую открыть его на полной странице и изменить его размер в меньшем окне, чтобы получить возможность прокрутки (сделайте это в спешке, извините)

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