CSS Grid等宽双列布局中长文本溢出外层div如何解决？

问题根因 #

1. CSS Grid 中1fr的默认计算规则为minmax(auto, 1fr)，当列内存在无空格的超长连续文本时，auto会优先匹配内容的最小宽度，导致列宽被撑破、超出外层容器。
2. 未给文本元素配置强制折行规则，超长内容无法自动换行。
   此外你提供的HTML存在标签不匹配问题：<h4>的闭合标签误写为</h2>，建议先修正为<h4>Short Text</h4>，避免浏览器异常渲染。

修复代码 #

.container {
    display: grid;
    /* 替换原1fr配置，强制两列严格按比例分配宽度，不受内容最小宽度影响 */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-gap: 20px;
    background-color: #ffe8d6;
    filter: brightness(90%);
    padding: 5px;
}

/* 为第二列文本添加折行规则 */
.a1 p {
    /* 强制超长连续文本折断换行 */
    overflow-wrap: break-word;
    /* 可选：英文场景下开启自动断字，折行更美观，中文场景可删除 */
    hyphens: auto;
}

效果说明 #

• 两列始终保持等宽，总宽度不会超出container容器
• 第二列高度随文本长度自动调整，第一列高度同步对齐第二列
• 文本全部限制在容器内部，不会出现溢出问题

如果需要限制第二列最大高度，超出后滚动，可在.a1 p规则中补充以下配置：

max-height: 自定义高度值;
overflow-y: auto;

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