使子div文本内容不扩展其父级固定位置的div宽度

Question

I am working on kind of a popup. Its structure is very simple and is as follows:

<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>

with styles of

.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;
}

and here is a fiddle with the code applied.

As you can see, the div.popup is positioned as fixed to the body .

What I want to achieve is to make the div.description NOT extend its parent div.popup width when it contains much text, instead it should wrap the text to be multilined and be of width of the div.popup . The div.popup width should be determined by the div.upper width and its content. In other words I mean to have div.description 's width AT MOST of the div.upper 's width, regardless to its ( div.description text content).

EDIT

There's this little difficulty:

Is that even possible to achieve that with CSS?

Answer 1

http://jsfiddle.net/de6fr/1/ - a basic example of how to fix

---

You're basically using popup as a container, which means that if you want to retain its width, that's what you have to work on. I used the max-width property with .popup like this:

.popup {
    position: fixed;
    left: 50px; 
    top: 50px;
    border: 1px solid;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #000;
    display: table;
    width: 1px;
}
.popup > div { 
    display: table-row;
}

.popup .upper {
    min-width: 100px;
    min-height: 100px;
    border: 1px solid;
    padding: 5px;
}
.popup .upper img {
    display: block;
}

---

Update - Flexible

http://jsfiddle.net/de6fr/4/

The fix for making it flexible is to use a CSS hack , which basically changes the nature of the element to a table

The nature of CSS ( cascading style sheets) means that it's pretty hard to get a parent DIV to take the size of a child div without some crazy ideas involved. However, there's nothing preventing a "table" with a really small width doing that, as per this code:

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

Answer 2

Add a CSS property to your popup class and Give it a width

.popup
{
    position: fixed;
    left: 50px; 
    top: 50px;
    border: 1px solid;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #000;
    overflow:scroll;
    width:400px;
}

Answer 3

You have not defined the width for fixed element so add some width to your fiexed element

.popup
{
    position: fixed;
    left: 50px; 
    top: 50px;
    border: 1px solid;
    background: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #000;
    width: 100%;
}

here is the demo