如何使用CSS调整div高度，解决CSS Grid下长标题重叠问题

问题根源 #

• Grid布局行高被固定：.wrapper的grid-template-rows: repeat(10, 40px)规则将所有网格行高硬编码为40px，外层.two容器的高度被限制在固定行范围内，无法随内部内容增长自适应扩容。
• 绝对定位导致高度塌陷：.header_container内部的h2设置了绝对定位，脱离了正常文档流，父容器无法感知到h2的实际高度，当标题内容超出min-height: 50px的限制后就会向上溢出，和上方的"Two"文本发生重叠。

修复代码 #

<!DOCTYPE html>
<html lang="en-US" class="no-js">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <style>
        .wrapper {
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            /* 前两行固定40px，第三行自适应，剩余行保持40px */
            grid-template-rows: repeat(2, 40px) auto repeat(7, 40px);
        }
        .one {
            grid-column: 2/5;
            grid-row: 2/5;
            background-color: #ee0
        }
        .two {
            grid-column: 4/8;
            /* 起始行固定为3，结束行设为auto让高度自适应 */
            grid-row: 3 / auto;
            background-color: #eee;
            padding: 20px;
            border: 1px solid #000
        }
        .header_container {
            /* 用flex布局替代绝对定位实现h2靠下 */
            display: flex;
            align-items: flex-end;
            border: 1px solid #000;
            min-height: 50px
        }
        .header_container h2 {
            /* 移除绝对定位相关规则，保留边距设置 */
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="one">one</div>
    <div class="two">Two
        <div class="header_container">
            <h2>Lorem ipsum dolor sit amet</h2>
        </div>
    </div>
</div>
</body>
</html>

修复说明 #

• 调整Grid行高规则：将.wrapper的第三行设置为自适应高度，同时取消.two容器的结束行固定值，让外层容器可以随内容自动向上扩容。
• 替换绝对定位方案：用flex布局的align-items: flex-end实现h2在容器底部对齐的效果，h2保留在正常文档流中，父容器可以自动感知标题高度调整自身尺寸，不会出现内容溢出重叠的问题。

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