How to make the block the correct height?

Question

css

Tell me how here: https://jsfiddle.net/uw23s0vL/ to make block c be stretched to the size of the parent element, and not crawl out of the border?

Answer 1

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