Как растянуть дочерний div по высоте при наличии других дочерних объектов?

.a {
  display: flex;
  flex-direction: column;
  
  background: #CCC;
  box-sizing: border-box;
  resize: both;
  overflow: hidden;
  width: 200px;
  height: 200px;
  padding: 10px;
}

.b {
  background: #FCC;
  height: 50px;
}

.c {
  background: #CFC;
  flex-grow: 1;
}

<div class="a">
  <div class="b">
    Some text
  </div>
  <div class="c">
    Some text
  </div>
</div>

.a {
  background: #CCC;
  box-sizing: border-box;
  resize: both;
  overflow: hidden;
  width: 200px;
  height: 200px;
  padding: 10px;
}

.b {
  background: #FCC;
  height: 50px;
}

.c {
  background: #CFC;
  overflow: hidden;
  height: calc(100% - 50px);
}

<div class="a">
  <div class="b">
    Some text
  </div>
  <div class="c">
    Some text
  </div>
</div>

.a {
  background: #CCC;
  box-sizing: border-box;
  resize: both;
  position: relative;
  overflow: hidden;
  width: 200px;
  height: 200px;
  padding: 10px;
}

.b {
  background: #FCC;
  height: 50px;
}

.c {
  background: #CFC;
  overflow: hidden;
  position: absolute;
  top: 60px;
  bottom: 10px;
  left: 10px;
  right: 10px;
}

<div class="a">
  <div class="b">
    Some text
  </div>
  <div class="c">
    Some text
  </div>
</div>