Flex Box内容无法填充容器高度及间距问题求助

我无法让Flex Box内的内容填满整个容器，且内容间无法保持足够间距。尝试使用line-height及换行等方法均无效，当前问题为单个容器内的元素未占满容器全部高度。

当前代码 #

CSS代码 #

.parent-box{
    width: 100%;
    text-align: center;
}

.child-box{
    background-color: white; 
    border: 1px solid green;
    /*flex-grow: 1;*/
    margin: 20px 50px;
    /*padding: 5px;*/
    display: inline-flex;
    flex-direction: column;

    width: 330px;
    height: 450px; /*also used auto but it's not working*/
    align-items: stretch;
}

.cta{
    background-color: hsl(213.4,78.8%,50%); 
    color: hsl(0,0%,100%); 
    padding: 20px; 
    text-align: center;
    margin-bottom: 0;
}

.cta-link{
    text-decoration: none;
}

HTML代码 #

<div class="parent-box">    
                    <div class="child-box">
                        <h3>Main Header</h3>
                        <h4>PHP is a language</h4>
                        <h4>PHP is a language</h4>
                        <h4>PHP is a language</h4>
                        <h4>PHP is a language</h4>
                        <h4>PHP is a language</h4>
                        <h4>PHP is a language</h4>
                        <h3>PHP is a language</h3>
                        <a class="cta-link" href="#"><h2 class="cta">Choose Now</h2></a>
                    </div>
</div>

解决方案 #

要实现内容填满容器高度并拉开元素间距，只需对.child-box和内部结构做针对性修改：

方案1：快速实现首尾贴边、中间自动分配间距 #

给.child-box添加justify-content: space-between;属性，该属性会让垂直方向（因为flex-direction: column）的子元素自动分布，首尾元素贴紧容器上下边缘，中间元素间距自动拉开。

修改后的.child-box CSS：

.child-box{
    background-color: white; 
    border: 1px solid green;
    margin: 20px 50px;
    display: inline-flex;
    flex-direction: column;
    width: 330px;
    height: 450px;
    justify-content: space-between; /* 新增核心属性 */
}

方案2：让中间文本元素也均匀分布 #

如果希望中间的所有文本元素之间也保持均匀间距，可把文本元素统一包裹在一个容器内，给这个容器设置弹性布局：

修改后的HTML：

<div class="parent-box">    
    <div class="child-box">
        <div class="content-inner">
            <h3>Main Header</h3>
            <h4>PHP is a language</h4>
            <h4>PHP is a language</h4>
            <h4>PHP is a language</h4>
            <h4>PHP is a language</h4>
            <h4>PHP is a language</h4>
            <h4>PHP is a language</h4>
            <h3>PHP is a language</h3>
        </div>
        <a class="cta-link" href="#"><h2 class="cta">Choose Now</h2></a>
    </div>
</div>

新增对应CSS：

.content-inner{
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px; /* 可选，避免内容贴容器边缘 */
}

这样既能让整体内容填满容器高度，也能让所有元素间保持均匀合理的间距。

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