Issue with child height - html

Question

Okay, so i have my parent DIV (black), and 3 children.
CSS rules:
#parent{
height:130px;
}
#description{
max-height: 80px;
}
And that's actually pretty much it for now.
What I am trying to do
#title should resize according to text inside. It can be from one, to 5-6 lines of text (it's a span, can be div - any difference?)
#city is like 99% of the time one line text (one word actually). Might happen text gets too long, and needs to be wrapped to two lines.
#description is a div, which CANNOT go outside the parent box. I need it to have dynamic height - as for later, i use some plugin to cut the text according to height of it and add "..." in the end.
Image shows what it looks like now, when i put too much text in title, and i would like, description to be max 80px, but CAN be less, if #title takes more place.
JsFiddle
EDIT: Changed image

Answer 1

You may want to try flexbox for such a layout. It may not provide you with a pixel perfect layout on the kind of complex rules you have, but it will still be a powerful way to control.
Fiddle: https://jsfiddle.net/abhitalks/kwq2L3y7/6/
Snippet:
#parent {
border: 1px solid black;
height: 200px; width: 80px;
float: left; margin: 16px;
display: flex; flex-direction: column;
}
#title {
flex: 2 1 auto; /* can grow twice, can shrink, auto height */
border: 1px solid red;
overflow: auto;
}
#city {
flex: 1 1 20px; /* can grow, can shrink, accommodate in 20px */
border: 1px solid green;
overflow: hidden;
}
#description {
flex: 0 1 80px; /* cannot grow, can shrink, accommodate in 80px */
border: 1px solid blue;
overflow: hidden;
}
<div id="parent">
<div id='title'>Title</div>
<div id="city">City</div>
<div id="description">Description</div>
</div>
<div id="parent">
<div id='title'>Long Title can be of several lines and can grow many lines</div>
<div id="city">City can be in 2 lines</div>
<div id="description">Description which is very long and it will not grow beyond 80px</div>
</div>
<div id="parent">
<div id='title'>Title</div>
<div id="city">City can be in 2 lines what if it is larger</div>
<div id="description">Description will remain at 80px</div>
</div>

Answer 2

What you want to get, you need to set height: 100% in #description.
Use like this:
#parent{
border: 2px solid black;
overflow: hidden;
}
#description{
border: 2px solid blue;
height: 100%;
}
demo
You may display the text in ellipsis.

Answer 3

I don't get what you exactly want to do, but you should have a look on the 'overflow' method with for example:
#parent{
overflow-y: hidden;
}
or
#parent{
overflow-y: scroll;
}

Answer 4

If you want the height to be dynamic, you could try use min-height
#parent {
min-height:130px;
width: 80px;
}
#description {
min-height: 80px;
}
https://jsfiddle.net/arty_/x8f7v25h/