使用Grid布局时div高度无法随内容自适应的问题求助

问题根源 #

你的.neu类中已经设置了height: max-content，但后续的div.neu选择器优先级更高，强制给div设置了固定高度height: 12vw，这才是导致div无法随内部文本自动扩展的核心原因，和Grid布局本身无关。

修复步骤 #

1. 移除div.neu中的固定高度设置，或者将其改为最小高度min-height: 12vw（如果需要保留一个基础高度），这样当内容超出基础高度时，div会自动拉伸：

div.neu {
    min-height: max-content;
    /* 替换为min-height，或直接删除height属性 */
    min-height: 12vw;
}

2. 可以去掉.neu中的display: inline-block，Grid布局的子元素默认是块级元素，这个属性会干扰自动高度计算。

修改后的.neu和div.neu样式：

.neu {
    background: rgba(255,255,255,0.05);
    outline: 1px rgb(146, 146, 146) solid;
    border-radius: 20px;
    filter: drop-shadow(10px 10px 4px rgba(0,0,0,0.4));
    backdrop-filter: blur(6px);
    padding: 20px;
    color: rgb(43, 43, 43);
    transition: 1s;
    resize: height;
    height: max-content;
}

div.neu {
    min-height: 12vw;
}

保留p标签间上边框的替代布局方案 #

当前通过.bodyText的border-top实现分隔线的方式已经可行，这里提供两种更灵活的替代方案：

方案1：给标题添加下边框

将分隔线移到标题下方，避免给正文设置padding-top，布局更简洁：

.headerText {
    font-size: 28px;
    margin: 0 0 14px 0;
    padding: 0 0 14px 0;
    border-bottom: 1px rgb(146, 146, 146) solid;
    word-wrap: break-word;
}

.bodyText {
    font-size: 16px;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
}

方案2：使用独立分隔元素

如果需要更自定义的分隔样式，可以添加一个空的分隔元素（会增加少量HTML结构）：

<div id="about" class="neu">
    <p class="headerText">About</p>
    <div class="divider"></div>
    <p class="bodyText">xxx has been serving the scientific and technology sectors for decades.</p>
</div>

.divider {
    height: 1px;
    background-color: rgb(146, 146, 146);
    margin: 14px 0;
}

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