CSS嵌套grid网格布局无法适配父容器问题咨询

• 嵌套网格容器.left仅通过grid-template-areas定义了区域命名，未显式设置grid-template-rows行高规则，浏览器会默认按子元素内容高度分配行空间，当内容总高度超出父容器可用高度时，就会出现溢出、无法适配外层红色网格左列的问题。
• 网格布局下的子项默认有min-width: auto、min-height: auto的特性，你.contact模块内有超长无间隔字符串，仅设置word-wrap: break-word无法突破这个默认限制，会导致子项内容撑开网格宽度，无法适配父容器。
• 内层嵌套网格.intro仅定义了grid-template-areas的区域排布，未设置对应的grid-template-columns列宽规则，也会引发布局错位。

替换对应CSS部分即可解决问题：

1. 调整.left网格规则

.left{
    grid-area: left;
    display: grid;
    /* 按需求显式分配行高：contact占1份，skills占3份，languages占1份 */
    grid-template-rows: 1fr 3fr 1fr;
    grid-template-areas: 
    "contact"
    "skills"
    "languages";
    grid-gap: 10px;
    font-size:1rem;
    /* 解除默认最小宽高限制，避免子内容撑开父网格 */
    min-width: 0;
    min-height: 0;
}

2. 调整.contact文本规则

.contact{
    grid-area: contact;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
}

3. 调整.intro网格规则

.intro{
    grid-area: intro;
    display: grid;
    /* 显式定义列宽：photo占1份，name占3份 */
    grid-template-columns: 1fr 3fr;
    grid-template-areas: 
    "photo name"
    "content content";
    grid-gap: 10px;
}

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