如何使子div高度与父div匹配？CSS布局问题求助

• 父容器.welcome是flex布局且设置了align-items: center，该属性会让flex子元素在垂直方向（交叉轴）居中对齐，子元素高度被限制为自身内容高度，无法自动占满父容器垂直空间。
• 子div的height: 100%无效，是因为.welcome的高度由内部内容自动撑开（未显式设置height或min-height），子元素的百分比高度没有明确参考基准，因此无法生效。

方案一（推荐：灵活自适应） #

修改.welcome的align-items属性为stretch，利用flex原生特性让子元素自动占满父容器垂直高度，同时可移除子div的height: 100%：

.content {
    grid-area: content;
    margin: 5px 0 5px 0;
}

.welcome {
    background-color: var(--background-color-gray);
    padding: 30px 50px 50px 50px;
    display: flex;
    justify-content: space-between;
    /* 替换align-items值为stretch */
    align-items: stretch;
    overflow: hidden;
}

.welcome div {
    width: 100%;
    /* 移除height:100% */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--background-color-black);
}

方案二（固定高度场景可选） #

若需保留align-items: center，可给.welcome设置高度基准，再给子div添加align-self: stretch强制占满垂直高度，内部仍用flex布局保持内容居中：

.content {
    grid-area: content;
    margin: 5px 0 5px 0;
}

.welcome {
    background-color: var(--background-color-gray);
    padding: 30px 50px 50px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    /* 设置高度基准 */
    min-height: 400px;
}

.welcome div {
    width: 100%;
    height: 100%;
    /* 强制子元素占满垂直高度 */
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--background-color-black);
}

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