У вас проблема с переполнением, ваше тело является блочным элементом, поэтому его ширина не будет превышать размер экрана, который создает проблему левой боковой панели.
Простое решение - сделать телоinline-grid
:
body {
margin: 1rem;
display: inline-grid;
grid-template-columns: 3rem auto;
grid-template-rows: 12vh 2rem auto;
grid-template-areas: "header header" "topleft topright" "bottomleft bottomright";}
.header {
position: fixed;
grid-area: header;
display: block;
background: white;
text-align: center;
width: 100vw;
}
.topleft {
grid-area: topleft;
background-color: #bababa;
border: solid 1px black;
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
z-index: 2;
}
.topright {
grid-area: topright;
background-color: #c0c0c0;
border: solid 1px black;
box-sizing: border-box;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
white-space: nowrap;
display: inline-block;
width: 300vw; /* simulate large horizontal data set */
}
.bottomleft {
grid-area: bottomleft;
background-color: #c0c0c0;
border: solid 1px black;
box-sizing: border-box;
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 1;
height: 300vh; /* simulate large vertical data set */
}
.bottomright {
grid-area: bottomright;
background-color: #cacaca;
border: solid 1px brown;
box-sizing: border-box;
text-align: left;
display: inline-block;
height: 300vh; /* simulate large vertical data set */
width: 300vw; /* simulate large horizontal data set */
}
<div class="header">
This intro area should be visible until scrolled out of view.
</div>
<div class="topleft">
Stay
</div>
<div class="topright">
Top line sticky vertically but not horizontally
</div>
<div class="bottomleft">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<div class="bottomright">
Large area with cells
</div>
Чтобы лучше проиллюстрировать проблему, вы можете добавить границу к исходному коду, и вы увидите, что левая боковая панель достигнет этой границы, а затем остановится:
body {
margin: 1rem;
display: grid;
border:2px solid red;
grid-template-columns: 3rem auto;
grid-template-rows: 12vh 2rem auto;
grid-template-areas: "header header" "topleft topright" "bottomleft bottomright";}
.header {
position: fixed;
grid-area: header;
display: block;
background: white;
text-align: center;
width: 100vw;
}
.topleft {
grid-area: topleft;
background-color: #bababa;
border: solid 1px black;
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
z-index: 2;
}
.topright {
grid-area: topright;
background-color: #c0c0c0;
border: solid 1px black;
box-sizing: border-box;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
white-space: nowrap;
display: inline-block;
width: 300vw; /* simulate large horizontal data set */
}
.bottomleft {
grid-area: bottomleft;
background-color: #c0c0c0;
border: solid 1px black;
box-sizing: border-box;
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 1;
height: 300vh; /* simulate large vertical data set */
}
.bottomright {
grid-area: bottomright;
background-color: #cacaca;
border: solid 1px brown;
box-sizing: border-box;
text-align: left;
display: inline-block;
height: 300vh; /* simulate large vertical data set */
width: 300vw; /* simulate large horizontal data set */
}
<div class="header">
This intro area should be visible until scrolled out of view.
</div>
<div class="topleft">
Stay
</div>
<div class="topright">
Top line sticky vertically but not horizontally
</div>
<div class="bottomleft">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<div class="bottomright">
Large area with cells
</div>
В качестве примечания следует избегать использования тела в качестве контейнера, лучше полагаться на собственный контейнер, чтобы впоследствии было легче добавить больше структуры илиинтегрировать ваш код в другом месте
body {
margin:0;
}
.container {
margin: 1rem;
display: inline-grid;
border:2px solid red;
grid-template-columns: 3rem auto;
grid-template-rows: 12vh 2rem auto;
grid-template-areas: "header header" "topleft topright" "bottomleft bottomright";}
.header {
position: fixed;
grid-area: header;
display: block;
background: white;
text-align: center;
width: 100vw;
}
.topleft {
grid-area: topleft;
background-color: #bababa;
border: solid 1px black;
position: -webkit-sticky;
position: sticky;
top: 0;
left: 0;
z-index: 2;
}
.topright {
grid-area: topright;
background-color: #c0c0c0;
border: solid 1px black;
box-sizing: border-box;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 1;
white-space: nowrap;
display: inline-block;
width: 300vw; /* simulate large horizontal data set */
}
.bottomleft {
grid-area: bottomleft;
background-color: #c0c0c0;
border: solid 1px black;
box-sizing: border-box;
position: -webkit-sticky;
position: sticky;
left: 0;
z-index: 1;
height: 300vh; /* simulate large vertical data set */
}
.bottomright {
grid-area: bottomright;
background-color: #cacaca;
border: solid 1px brown;
box-sizing: border-box;
text-align: left;
display: inline-block;
height: 300vh; /* simulate large vertical data set */
width: 300vw; /* simulate large horizontal data set */
}
<div class="container">
<div class="header">
This intro area should be visible until scrolled out of view.
</div>
<div class="topleft">
Stay
</div>
<div class="topright">
Top line sticky vertically but not horizontally
</div>
<div class="bottomleft">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
</div>
<div class="bottomright">
Large area with cells
</div>
</div>