Why won't the grid track cells dynamically shrink when other cells are enlarged in the following code?
In this snippet, hovering over any track section causes that cell to grow to 75% of the viewpoint. However, instead of the other sections shrinking to fit the newly sized section, they remain at their original size, causing the cells to extend beyond the grid's boundaries.
I want to be able to resize sections of the grid by hovering over them while having the other sections adjust their size accordingly. Is there a way to achieve this, and why isn't my code working as expected?
.grid--container {
height: 100vh;
width: 100vw;
max-height: 100%;
max-width: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
border: 1px solid red;
}
.track--section {
border: 1px dotted grey;
min-height: 0;
min-width: 0;
}
.track--section:hover {
background-color: #333;
height: 75vh;
width: 75vw;
}<div class="grid--container">
<div class="track--section">section1</div>
<div class="track--section">section2</div>
<div class="track--section">section3</div>
<div class="track--section">section4</div>
</div>