一个父元素有两个子元素上下排列，怎么使下面的子元素撑满父元素

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

由于上面的子元素有高度，下面的子元素会被上面的元素挤出父元素的范围。

    <style>
        .a {
            height: 100px;
            width: 100px;
        }
        .b {
            height: 10px;
            width: 10px;
        }
        .c {
            height: 100%;
            width: 100%;
            background-color: red;
        }
    </style>
</head>
<body>
   <div class="a">
       <div class="b"></div>
       <div class="c"></div>
   </div>

###

.a {
    display: flex;
    flex-direction: column;
    height: 100px;
    width: 100px;
}
.b {
    height: 10px;
    width: 10px;
}
.c {
    flex: 1;
    width: 100%;
    background-color: red;
}

###

height: 10px
height: calc(100% - 10px)

###

.a {
    display: flex
    flex-direction: column
    width: 100px
    height: 100px
}
.b {
    width: 100%
    height: 10px
}
.c {
    flex: 1
    width: 100%
    background-color: red
}

`
看看这样能满足你的要求吗