How do you make two divas in a rubber pole?

[Jolied]

There are two divas in the pole, the first diva has a dynamic height (i.e. unknown) depending on the content. The second divine shall occupy the remaining height minus the height of the first diva. Is it possible to implement this without javascript and without a table?

HTML

<div class="wrapper">
     <div class="title">text text text text text text text text text text text text text text</div>
     <div class="body">text</div>
</div>

CSS:

.wrapper {
   height: 90%; width: 200px;
   background: red;
   padding: 0 5px;
   position: fixed;
}
.title {
   background: blue;
}
.body {
   background: yellow;
   height: 100%;
}

JSFIDDLE

https://jsfiddle.net/jetvsg8n/

[Kadyn]

You'll be able to use the flex with a focus on the columns and proportions 0 and 1.

.wrapper {
    height: 150px; width: 150px;
    background: red;
    padding: 0 5px;
    position: fixed;
    display: flex;
    flex-direction: column;
}
.title {
    background: blue;
    flex: 0;
}
.body {
    background: yellow;
    flex: 1;
}

<div class="wrapper">
    <div class="title">Lorem Ipsum Lorem Ipsum</div>
    <div class="body">text text text text text</div>
</div>