Scroll only the div horizontally & vertically when transformed to a scale and position the siblings accordingly

问题

I have this typical layout and I need to scale only the content section but move the division which is right/next to it accordingly.

i.e, when the content section is scaled out, it exceeds its space and moves of the out viewport width and height. In the case of exceeding viewport width, I need to move the right yellow span/bar as it's position is also changing as per its sibling's width. Please note that I am using display: grid so I position the elements as per the columns but not give a certain width. And, so I cannot give the translateX value directly to the right yellow span/bar.

The next problem statement is I need to provide the scrolling bars both horizontally & vertically to the content section only and there can be an outer vertical scrollbar for the entire body. When I scaled the content section since it is increasing the viewport width there is an empty space creating right after header section.

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

Please take a look at the playground as well https://codepen.io/frank-underwood/pen/XWWgJYm?editors=1100

来源：https://stackoverflow.com/questions/58563689/scroll-only-the-div-horizontally-vertically-when-transformed-to-a-scale-and-po

标签

javascript

css

scrollbar

css-position

transform