css父级已经被一个子级撑起来了，另一个子级却没有跟随父级的高度变化，咋回事呢？

.父级{
    display: flex;
    justify-content: center;
    align-items: center;
}
.第一个子级{
height:400px}
.第二个子级{
height:100%}

html
<div class="父级">
  <div class="第一个子级"></div>
  <div class="第二个子级">
    <p>234234</p>
    <p>23423</p>
</div>
</div>

第二个子级的实际高度是被他的内容撑起来的，怎么才能让他的高度和父级一样呢，因为我想加个背景色，所以他的高度必须起来，但是又不能给个固定的高度

因为父级没有高度呀，所以height:100%也是没有高度的
所以父级设定个高度呗
还有class中文太屑了吧

父层元素需要设置高度值，子层元素百分比高度都是相对于父层的
这么说 在父元素没有设置高度的情况下是 auto

你就这么去理解 auto*100% 肯定不会有结果就对了

img


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css1.css" />
        <title></title>
        <style>
            .fa {
                height:100%;
                display: flex;
                justify-content: center;
                background: #007AFF;
                flex-direction: row;
                align-content: stretch;
            }
            
            .fa1 {
                width: 100px;
                height: 400px;
                background: #f00;
            }
            
            .fa2 {
                width: 100px;
                background: #F4C6A6;
                flex:1;
                position:relative;
            }
        </style>

        <body>

            <div class="fa">
                <div class="fa1"></div>
                <div class="fa2">
                    <p>234234</p>
                    <p>23423</p>
                </div>
            </div>
        </body>

</html>

使用表格布局可以实现你想要的效果

.父级{
}
.第一个子级{
  display:table-cell;
  height:400px
}
.第二个子级{
  display:table-cell;
}