修改网格以使用全高度，但不能超过

Question

下面的代码段可以工作(您必须在"Full page">中运行它，在运行代码段后查看右侧的按钮)，但是当单击一个元素时，它超过了浏览器的高度。为什么grid-auto-rows: fit-content(50%) fit-content(50%);不足以防止这种情况发生?

如何解决这个问题，为了让所有元素在一个页面中可见，而不必滚动?(点击图片查看有问题的布局)

var $ = document.querySelector.bind(document);
var $$ = document.querySelectorAll.bind(document);
$('body').addEventListener('click', (event) => {
$$('.container > div').forEach(element => element.classList.remove('clicked'));
$('.container').classList.remove('clicked');
if (event.target.tagName == "IMG") {
event.target.closest('.container').classList.add('clicked');    
event.target.closest('.box').classList.add('clicked');
}
});

.page { max-width: 80%; max-height: 80%; margin: auto; border: 1px solid black; } 
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: fit-content(50%) fit-content(50%); gap: 0.5rem; }
.container img { max-width: 100%; }
.box { background-color: gray; }
.container.clicked { grid-template-columns: 1fr 1fr 4fr; grid-auto-rows: fit-content(33%) fit-content(33%) fit-content(33%); }    
.box.clicked { grid-column: 3 / 4; grid-row: 1 / 4; padding: 10px; background-color: yellow; }
.container.clicked .box:not(.clicked) { grid-auto-flow: column; }

<div class="page">
<div class="container">
<div class="box">Hello world <img src='https://picsum.photos/id/237/200'></div>
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="box"><img src='https://picsum.photos/id/241/300'></div>
<div class="box"><img src='https://picsum.photos/id/242/400'></div>
<div class="box"><img src='https://picsum.photos/id/238/500'></div>
<div class="box"><img src='https://picsum.photos/id/239/200'></div>
</div>
</div>

Answer 1

你必须限制容器的高度并考虑盒子元素的溢出

var $ = document.querySelector.bind(document);
var $$ = document.querySelectorAll.bind(document);
$('body').addEventListener('click', (event) => {
$$('.container > div').forEach(element => element.classList.remove('clicked'));
$('.container').classList.remove('clicked');
if (event.target.tagName == "IMG") {
event.target.closest('.container').classList.add('clicked');
event.target.closest('.box').classList.add('clicked');
}
});

.container {
display: grid;
max-height: 100vh; /* added */
max-width: 80%;
margin: auto;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 0.5rem;
}
.container img {
max-width: 100%;
}
.box {
background-color: gray;
overflow: auto; /* added */
}
.container.clicked {
grid-template-columns: 1fr 1fr 4fr;
grid-template-rows: 1fr 1fr 1fr;
}
.box.clicked {
grid-column: 3 / 4;
grid-row: 1 / 4;
padding: 10px;
background-color: yellow;
}
body {
margin: 0;
}

<div class="container">
<div class="box">Hello world <img src='https://picsum.photos/id/237/200'></div>
<div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="box"><img src='https://picsum.photos/id/241/300'></div>
<div class="box"><img src='https://picsum.photos/id/242/400'></div>
<div class="box"><img src='https://picsum.photos/id/238/500'></div>
<div class="box"><img src='https://picsum.photos/id/239/200'></div>
</div>