Limit width of div to parent width, otherwise use ellipse - html

Question

I want to build a container that contains an image on the left side and to its right there is supposed to some information about it, like a headline and some description.
I want the container to be able to expand between some minimum and maximum width dynamically. The images can also have different widths between two boundaries and if the container already has a maximum width, but the headline is longer, the headline should be shortened and there should appear some dots.
I found a way to shorten the headline, like here: http://jsfiddle.net/h0452569/
, but therefore I need to limit the width of the container next to the image. I tried this with the code below, but I can't find a way with CSS to dynamically limit the div width to not extend the container's div!
I would be very happy if anyone had an idea out there!
jsfiddle
HTML:
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
<div style="clear:both"></div>
CSS:
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
position: absolute;
border: 1px solid #666666;
white-space:nowrap;
}
.image {
float: left;
display: inline-block;
vertical-align: top;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.meta-container {
overflow: hidden;
text-overflow:ellipsis;
display: inline-block;
}
.headline {
width: 100%;
white-space:nowrap;
}
.description {
font-size:.8em;
}

Answer 1

In the example you refer to, those styles are added to the text element itself. In your design, the styles are given to the parent element.
Solution: add the styles to .headline instead of .meta-container.
.container {
min-width: 200px;
max-width: 250px;
max-height: 100px;
border: 1px solid #666666;
overflow: hidden;
}
.image {
float: left;
}
.image img {
max-width: 100px;
max-height: 80px;
vertical-align: top;
}
.headline {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.description {
font-size: .8em;
}
<div class="container">
<div class="image"><img src="https://farm6.staticflickr.com/5238/14184095861_d3787020c7_t.jpg" width="100" height="71" alt="alt_flickr-7"></div>
<div class="meta-container">
<div class="headline">Some very very very long headline</div>
<div class="description">Some description</div>
<div class="description">Other stuff</div>
</div>
</div>
<p>Next element</p>

Answer 2

In order to break the word use "word-wrap: break-word" in your .headline class, you also need to set a width (in px). For example:
.headline{
width:100px;
word-wrap: break-word;
}