How to fill a DIV with another DIV properly?

Question

I own a <div> to store some elements, and the last element will be another <div>. I want to make this last element tall enough to fill the <div> but without exceeding the limit.

To accomplish this task, I tried to use height: 100%. The problem is that it causes the <div> daughter has the total size of <div> mother.

#parents{
    border: 2px solid #000;
    width: 300px;
    height: 200px;
}

#parents > div {
    width: 100%;
}

#target {
    height: 100%;
}

<div id="parents">
    <div style="background: red;"> Uma divizinha aqui </div>   
    <div style="background: green;"> Mais uma outra divizinha ali</div>
    <div id="target" style="background: yellow;">Minha div alvo</div>
</div>

How can I do this using CSS only?

Answer 1

Puts the container mother with display: flex and flex-direction: column, then the div you want to fill the total of the mother container you put flex: 1;

#parents{
    border: 2px solid #000;
    width: 300px;
    height: 200px;
    display: flex;
    flex-direction: column;
}

#parents > div {
    width: 100%;
}

#target {
    flex: 1;
}

<div id="parents">
    <div style="background: red;"> Uma divizinha aqui </div>   
    <div style="background: green;"> Mais uma outra divizinha ali</div>
    <div style="background: pink;"> Pare e estude FLEX, Pare e estude FLEX, Pare e estude FLEX</div>
    <div id="target" style="background: yellow;">Minha div alvo</div>
</div>