Как сделать блок правильной высоты?

Question

[Игорь Махов]

Подскажите, как здесь: https://jsfiddle.net/uw23s0vL/ сделать так чтобы блок c был растянут по размеру родитительского элемента, а не вылезал за границы?

Answer 1

[Алексей]

Вот блок #c занимает все свободное пространство с учетом прописанных падингов. Но не совсем понятно куда при этом должен блок #b деваться при такой структуре. Его либо надо убрать, либо иметь понимание что с ним делать

div{
padding:16px;
}
#a {
box-sizing: content-box;
border: 1px solid red;
height: 200px;
display: flex;
flex-direction: column;
}
#b {
border: 1px solid green;
}
#c {
height: 100%;
border: 1px solid blue;
}