Сделать текстовое содержимое дочернего элемента div НЕ расширяющим ширину его родительского элемента с фиксированным позиционированием

Я работаю над всплывающим окном. Его структура очень проста и выглядит следующим образом:

<div class = "popup">
    <div class = "upper">
        <img src = "http://www.tapeta-mis-galazki-koala.na-pulpit.com/pokaz_obrazek.php?adres=mis-galazki-koala&rozdzielczosc=128x128" />
    </div>
    <div class = "description">This is a very interesting description of what you can see above.</div>
</div>

со стилями

.popup
{
    position: fixed;
    left: 50px; 
    top: 50px;
    border: 1px solid;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #000;
}
.popup .upper {
    min-width: 100px;
    min-height: 100px;
    border: 1px solid;
    padding: 5px;
    display: inline-block;
}
.popup .upper img {
    display: block;
}

и вот скрипка с применяемым кодом.

Как вы можете видеть, div.popup позиционируется как фиксированный для body.

Я хочу добиться того, чтобы div.description НЕ расширял свою родительскую ширину div.popup когда он содержит много текста, вместо этого он должен обертывать текст, который должен быть многострочным, и иметь ширину div.popup. Ширина div.popup должна определяться шириной div.upper и ее содержимым. Другими словами, я хочу иметь ширину div.description AT MOST ширины div.upper, независимо от ее (текстового содержимого div.description).

РЕДАКТИРОВАТЬ

Там эта небольшая проблема: содержимое изображения не является статическим и может быть динамически изменено, поэтому ширина не является постоянной.

Можно ли даже добиться этого с помощью CSS?