溢出:自动在桌面上工作，但不能在移动设备上工作

Question

当文本不适合单个div时，我试图使其可滚动。这在桌面上很好，但在chrome dev控制台中，当我模拟移动设备时，它不会滚动，父div的背景图像也会缩放。请参阅下面的代码。任何建议都将不胜感激。

谢谢！布雷特

附言：请原谅我计划稍后改进的混乱代码。这一页的这一部分一直令人头疼。

#description {
overflow-y: auto;
}
@media only screen and (max-width: 600px) {

#results {
display: grid;
width: 100%;
height: 100%;
padding: 2vh;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
grid-row-gap: 2vh;
grid-auto-flow: row;
align-items: center;
align-content: center;
justify-content: center;
justify-items: center;
background-image: url(./assets/img/bg_hero_3.svg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
#results > #description {
grid-row: 3;
grid-column: 1 / 4;
width: 100%;
height: 100%;
padding: 10%;
text-align: center;
display: block;
}
#results > div {
display: grid;
align-items: center;
align-content: center;
justify-content: center;
justify-items: center;
grid-row-gap: 1vh;
}

.bubble {
height: 15vw !important;
width: 15vw !important;
}

h6 {
font-family: ArchitectsDaughter;
margin: 0;
padding: 0;
font-weight: 700;
font-size: 3vw;
text-align: center;
}
}
@media only screen and (min-width: 600px) {
#results {
display: grid;
width: 100%;
height: 80vh;
padding-top: 0%;
margin: 0 auto;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto 1fr;
align-items: center;
align-content: center;
justify-content: center;
justify-items: center;
background-image: url(./assets/img/bg_hero_3.svg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}

#results > #description {
grid-row: 2;
grid-column: 1 / 7;
width: 100%;
height: 100%;
padding: 10%;
text-align: center;
color: white;
display: block;
}

#results > div {
grid-row: 1;
display: grid;
align-items: center;
align-content: center;
justify-content: center;
justify-items: center;
align-text: center;
grid-template-rows: 10vh auto;
}

h6 {
font-family: ArchitectsDaughter;
margin: 0;
padding: 0;
font-weight: 700;
font-size: 2vw;
text-align: center;
}
}

Answer 1

好吧，我想明白了。我需要为网格(#results(和网格行模板(第三行(设置一个恒定的高度。参见以下代码：

#results {
display: grid;
width: 100%;
height: 80vh;
padding: 2vh;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto 50vh;
grid-row-gap: 2vh;
grid-auto-flow: row;
align-items: center;
align-content: center;
justify-content: center;
justify-items: center;
background-image: url(./assets/img/bg_hero_3.svg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}