CSS媒体查询下容器溢出且kira块固定在底部问题求助

编写CSS媒体查询时遇到容器溢出问题：自定义的container容器溢出body容器，需求是将container容器上移，避免名为kira的最后一个块固定在页面底部，手动设置margin-top未生效，火狐开发者工具检测到body元素存在溢出，判断为故障直接诱因。

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

/* BODY TAG */
body{
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 13px;
display: flex;
height: 100vh;
align-items: center;
justify-content: center;
}
/* END BODY TAG */
/* CONTAINER CLASS */
.container{
max-width: 1200px;
height: 600px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: 
"daniel daniel jonathan kira"
"jeanette patrick patrick kira";
grid-gap: 30px;

}
/* END CONTAINER CLASS */

/* MEDIA QUERY */
@media(max-width:480px){
.container{
    margin-top: -100px;
    width: 300px;
    grid-gap: 20px;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 1fr 1fr 2fr 2fr ;
    grid-template-areas: 
    "daniel"
    "jonathan"
    "jeanette"
    "patrick"
    "kira";
}
.daniel{
    grid-area: daniel;
}
.jonathan{
    grid-area: jonathan;
}
.kira{
    grid-area: kira;
}
.jeanette{
    grid-area: jeanette;
}
.patrick{
    grid-area: patrick;
}
}

/* TABLETTE QUERY */
@media(max-width:1024px) and (min-width:480px){
.container{
    max-width: 700px;
    grid-gap: 20px;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr 1fr 1fr 2fr 2fr ;
    grid-template-areas: 
    "daniel"
    "jonathan"
    "jeanette"
    "patrick"
    "kira";
}
.daniel{
    grid-area: daniel;
}
.jonathan{
    grid-area: jonathan;
}
.kira{
    grid-area: kira;
}
.jeanette{
    grid-area: jeanette;
}
.patrick{
    grid-area: patrick;
}
}
/* END TABLETTE QUERY */

/* END MEDIA QUERY */

1. body设置了固定height: 100vh，当移动端/平板端容器切换为单列布局后，内容总高度超过100vh，固定高度的body无法适配内容高度，直接导致溢出。同时flex布局的align-items: center在内容超过容器高度时，会让内容上下同时溢出视口，出现顶部内容被截断、底部kira块位置异常的问题。
2. .container在桌面端设置了固定height: 600px，媒体查询中没有覆盖该属性，单列布局下内容高度超过600px时会被强制挤压，进一步加剧溢出。
3. 移动端设置的负margin-top属于临时hack，没有解决根因，反而会导致正常布局下的位置偏移。

按以下步骤修改代码即可解决问题：

• 将body的height: 100vh替换为min-height: 100vh，保证内容不足一屏时居中展示，内容超过一屏时body高度自动适配内容，避免溢出。
• 移除.container的固定height: 600px，可替换为min-height: 600px保证桌面端的展示高度，也可以直接删除该属性让容器高度随内容自动适配。
• 删除移动端媒体查询中的margin-top: -100px属性，根因解决后无需该hack。

/* 修改后的body样式 */
body{
font-family: 'Barlow Semi Condensed', sans-serif;
font-size: 13px;
display: flex;
min-height: 100vh; /* 替换原有height:100vh */
align-items: center;
justify-content: center;
padding: 20px 0; /* 可选：添加上下内边距，避免内容贴边 */
}

/* 修改后的container样式 */
.container{
max-width: 1200px;
min-height: 600px; /* 替换原有height:600px，或者直接删除该行 */
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: 
"daniel daniel jonathan kira"
"jeanette patrick patrick kira";
grid-gap: 30px;
}

/* 修改后的移动端container样式 */
@media(max-width:480px){
.container{
    /* 删除margin-top: -100px */
    width: 300px;
    grid-gap: 20px;
    grid-template-columns: 1fr;
    grid-template-rows: auto; /* 可选：替换固定比例行高，让内容自动撑开 */
    grid-template-areas: 
    "daniel"
    "jonathan"
    "jeanette"
    "patrick"
    "kira";
}
}

内容的提问来源于stack exchange，提问作者user16715270