Grid布局侧边栏文本垂直溢出，求合理自适应布局方案

问题核心 #

页面缩放时，leftbar和rightbar的文本垂直溢出，需让文本始终保留在侧边栏内，布局围绕中间品牌区自适应，且不使用overflow:scroll，同时避免侧边栏侵入footer区域。

修改后的CSS代码 #

:root{
    --main-radius: 25px;
    --main-padding: 40px;
    box-sizing: border-box;
}

/* 核心修改：调整容器Grid配置 */
.container{
    display: grid;
    min-height: 100vh; /* 替换固定height为min-height，内容溢出时自动扩展 */
    grid-template-columns: auto 1fr 1fr auto; /* 侧边栏用auto自适应宽度，中间区域占剩余空间 */
    grid-template-rows: auto minmax(0, 1fr) auto; /* 中间区域弹性伸缩，限制最大高度避免溢出 */
    grid-template-areas: 
    "nav nav nav nav"
    "leftbar main main rightbar"
    "footer footer footer footer";
    grid-gap: 1.5rem;
    text-align: center;
    margin: 15px;
    margin-bottom: 45px;
}

/* logo center */
.logo-center {
    grid-area: main;
    display: grid;
}

.logo-center > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    grid-template-rows: repeat(2, 1fr);    
}

.logo-center h1 {
    background-attachment: fixed;
}

/* 侧边栏核心修改：确保文本不溢出 */
.leftbar, .rightbar{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: var(--main-padding); /* 可选，增加内边距优化视觉 */
}

.leftbar{
    grid-area: leftbar;  
}

.rightbar{
    grid-area: rightbar;
}

.rightbar > p{
    margin: 20px 0; /* 优化margin，避免挤压 */
}

/* nav和footer样式按需补充 */

关键修改说明 #

1. 容器高度与Grid行列配置

   • 用min-height:100vh替代固定height:100vh：容器至少占满视口高度，内容超出时自动向下扩展，从根源避免固定高度导致的内容溢出与footer侵入问题。
   • grid-template-columns: auto 1fr 1fr auto：侧边栏仅占用自身内容所需的最小宽度，中间品牌区优先占据剩余可用空间，实现围绕中间区域的自适应布局。
   • grid-template-rows: auto minmax(0, 1fr) auto：中间内容区域可弹性伸缩，minmax(0,1fr)确保空间不足时能收缩，同时限制最大高度避免挤压侧边栏。

2. 侧边栏文本控制

   • 给侧边栏添加flex布局：让内部元素按垂直方向排列，避免内容错乱。
   • word-wrap: break-word与overflow-wrap: break-word：强制长文本换行，确保内容始终保留在侧边栏容器内，无需滚动条。

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