求助：为div设置Overflow: scroll后无法显示全部文本

你的问题根源在于general_container里的align-items: center属性。当flex容器设置垂直居中对齐，且内部文本高度超过容器的max-height时，flex会让整个文本块在容器内居中，导致文本的顶部和底部部分被容器边缘裁切，滚动条只能滚动到可视区域的范围，无法触及被裁切的开头内容。

解决方案1：取消垂直居中（最简单） #

直接移除general_container中的align-items: center，让文本默认从容器顶部开始排列，这样内容溢出时滚动条就能正常访问所有内容。如果需要水平居中，保留justify-content: center即可：

.general_container{
    margin:         min(1vw,1vh) min(1vw,1vh);
    display:        flex;
    height:         fit-content;
    width:          fit-content;
    max-width:      100%;
    max-height:     80vh;
    position:       relative;
    padding:        min(1vw,1vh);
    border-color:   #232323;
    border-style:   solid;
    border-width:   0.2rem;
    border-radius:  1rem;
    justify-content:center; /* 保留水平居中 */
    overflow-x:     hidden;
    overflow-y:     auto;
}

.div_text {
    font-size:  calc(12px + 1.5vw);
    color:      #F2F2F2;
    position:   relative;
}

解决方案2：保留垂直居中同时支持滚动 #

如果需要文本在容器内垂直居中，同时内容溢出时能正常滚动，需要调整HTML结构，把居中逻辑移到内层容器：

修改后的HTML结构 #

<div class="general_container">
  <div class="inner_center">
    <div class="div_text">你的长文本内容...</div>
  </div>
</div>

修改后的CSS代码 #

.general_container{
    margin:         min(1vw,1vh) min(1vw,1vh);
    display:        block;
    height:         fit-content;
    width:          fit-content;
    max-width:      100%;
    max-height:     80vh;
    position:       relative;
    padding:        min(1vw,1vh);
    border-color:   #232323;
    border-style:   solid;
    border-width:   0.2rem;
    border-radius:  1rem;
    overflow-x:     hidden;
    overflow-y:     auto;
}

.inner_center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100% - 2*min(1vw,1vh)); /* 减去容器的上下padding，确保居中范围正确 */
}

.div_text {
    font-size:  calc(12px + 1.5vw);
    color:      #F2F2F2;
    position:   relative;
}

这样调整后，当文本内容较少时会在容器内垂直居中；当内容超过容器高度时，内层容器会自动撑开高度，外层容器的滚动条就能覆盖所有文本内容，不会出现无法访问开头的情况。

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