Прокрутите только div по горизонтали и вертикали при преобразовании в шкалу и расположите братьев и сестер соответственно

Question

У меня есть этот типичный макет, и мне нужно масштабировать только раздел контента, но соответственно перемещать разделение, которое находится справа / рядом с ним.

то есть, когда раздел содержимого масштабируется, он превышает свое пространство и перемещается на ширину и высоту внешнего окна просмотра. В случае превышения ширины области просмотра, мне нужно переместить правый желтый диапазон / полосу, поскольку его положение также изменяется в соответствии с шириной его родного брата. Обратите внимание, что я использую display: grid, поэтому я размещаю элементы в соответствии со столбцами, но не определяю их ширину. И, таким образом, я не могу дать значение translateX непосредственно правой желтой области / полосе.

Следующее постановка проблемы заключается в том, что мне нужно предоставить полосы прокрутки как по горизонтали, так и по вертикали только в раздел контента, и там можнобыть внешней вертикальной полосой прокрутки для всего тела. Когда я масштабировал раздел содержимого, так как он увеличивает ширину области просмотра, сразу после раздела заголовка создается пустое пространство.

.parent{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 'topDiv topDiv topDiv'
    'leftSpan content rightSpan'
    'footer footer footer';
    border: 1px solid red;
}
.topDiv{
  grid-area: topDiv;
  background:yellow;
  padding: 1rem;
}
.leftSpan{
  grid-area: leftSpan
  padding: 1rem;
  background: lightblue;
}
.content{
  grid-area:content;
  background: black;
    color:white;
  transform: scale(2);
  transform-origin:top left;
  z-index:0;
}
.content:hover {
  
}
.rightSpan{
  /*    Not sure how much I need to provide to make this right to content */
   transform:  translateX(calc(20rem * 1));
  grid-area: rightSpan;
  background:green;
}

<div class='parent'>
  <div class='topDiv'>I will not scroll horizontally</div>
  <div class='leftSpan'>I will not scale but will just move when horizontally scrolling</div>
  <div class='content'>I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable 
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable 
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable I want to be scrollable
I want to be scrollable I want to be scrollable </div>
  <div class='rightSpan'>Child A scales</div>
  <div class='footer'>I want to stick to bottom</div>
</div>

Пожалуйста, взгляните и на игровую площадку https://codepen.io/frank-underwood/pen/XWWgJYm?editors=1100