我正在尝试使网页的侧面部分沿y方向滚动，但似乎并没有一直滚动到下一张图片。我该如何解决？
如果您在“文档”下查看，则y滚动有效，但不会一直滚动到下一张图片的结尾。
P.S：我只希望页面的这一部分滚动。谢谢！
html, body {
margin: 0;
padding: 0;
font-family: 'Jura', sans-serif;
}
body{
overflow: hidden;
}
.container{
display: grid;
grid-template-columns: 60% 40%;
}
.main{
display: block;
background: #00C2F3;
}
.icon{
padding-right: 25%;
padding-left: 25%;
padding-bottom:35%;
padding-top:10%;
}
.headline{
color: white;
font-weight: bold;
font-size: 2vw;
letter-spacing: 5px;
text-align: center;
padding-top: 5%;
}
.title{
margin-top: 5%;
font-size: 5vw;
text-align: center;
font-weight: bold;
}
.tabs {
display: flex;
flex-wrap: wrap;
margin-top: 5%;
}
.tabs label {
order: 1;
display: block;
padding: 1rem 3rem;
cursor: pointer;
transition: background ease 0.2s;
width:100%;
text-align: center;
border-bottom: 1px solid #C28710;
color: #C28710;
font-size: 1.5vw;
letter-spacing: 2px;
}
.tabs .tab {
order: 99;
flex-grow: 1;
width: 100%;
display: none;
padding: 1rem;
}
.tab{
overflow-y: auto;
height: 100%;
}
.tabs input[type="radio"] {
display: none;
}
.tabs input[type="radio"]:checked + label {
border-bottom: 4px solid #C28710;
font-weight: bold;
}
.tabs input[type="radio"]:checked + label + .tab {
display: block;
}
.artiststatement {
font-size: 1.2em;
line-height: 150%;
padding-left: 5%;
padding-right: 5%;
padding-top: 3%;
}
.cards {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fill,minmax(200px, 1fr));
grid-auto-rows: 200px;
overflow-y: auto;
height: 200%;
}
.card {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
}
.cards img {
object-fit: cover;
width: 100%;
height: 200px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Exploits</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link href="https://fonts.googleapis.com/css?family=Jura:300" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="main">
<div class="icon">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="Bristol harbour">
<div class="headline">
It's time to rethink!
</div>
</div>
</div>
<div class="information">
<div class="title">Exploits</div>
<div class="tabs">
<input type="radio" name="tabs" id="tabone" checked="checked">
<label for="tabone">Artist Statements</label>
<div class="tab">
<div class="artiststatement">
Environmental issues have always been a topic that interests me. In the twenty-first century, human advancement has come so far that we have forsaken our own planet. Only focusing on our own benefit we ignored the damage left behind. With the idea in mind, I want to use that same technology to show the damaging effect of large-scale human exploitation on our planet. I began by creating a land mass and add as many human activities I could think of. For the presentation, I want to place what I’ve made inside of a box. The notion of human putting everything in the box gave me this idea. Since we love to put man-made creation inside a box we when don’t want it, why not put global warming in a box hence it is enhanced by man-made activities. Through the project, I want to inform viewers about harmful human activities and raise awareness for better solutions.
</div>
</div>
<input type="radio" name="tabs" id="tabtwo">
<label for="tabtwo">Documentations</label>
<div class="tab">
<div class="cards">
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="Bristol harbour">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="Bristol harbour">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="Bristol harbour">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="Bristol harbour">
</div>
<div class="card">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/harbour1.jpg" alt="Bristol harbour">
</div>
</div>
</div>
<input type="radio" name="tabs" id="tabthree">
<label for="tabthree">External links</label>
<div class="tab">
<h1 class="phrase">Stay in touch!</h1>
<blaze-divider class="divider">Get Connected</blaze-divider>
<div class="socials">
<a href="https://www.facebook.com/thanh.truong.3597" class="icons" target="_blank">Facebook</a>
<a href="https://www.instagram.com/thanh_be_like/" class="icons" target="_blank">Instagram</a>
<a href="https://www.linkedin.com/in/thanh-truong-918509163/" class="icons" target="_blank">Linkedin</a>
<a href="creative_resume.pdf" class="icons" target="_blank">Resume</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
预期：滚动到下一张照片。 实际结果：仅显示了最后一张照片的一半。