子元素不能拉伸父容器

Question

Children element not stretch parent container.

My code:

html:

<div class='window'>
    <div class='wrapper'>
        <div class='short'>short</div>
        <div class='long'>long</div>
    </div>
</div>

css:

.window{
    width: 500px;
    height: 100px;
    overflow: auto;
    background: gray;
}

.wrapper{
    background: pink;
    border: 1px solid red;
}

.long{
    width: 700px;
    background: beige;
}

example

I want .long stretch his parent .wrapper . .wrapper width must be the same as .long (700px).

I can reach this by setting float: left to .wrapper .

But what happens here i don't understand, why it helps? What is the mechanism of such behavior? I need explanation, with links to w3c documentation.

What else can i do to extend .wrapper width?

Answer 1

By default, the .wrapper div is inheriting the fixed width you set on .window . You can float the .wrapper and set it's width to auto so the width expands without restriction to the parent.

CSS:

.wrapper {
    float: left;
    width: auto;
}

Example: http://jsfiddle.net/WTGAc/3/

Theory:

By default, the dimensions of wrapper are constained to the dimensions placed on it's parent, .window .

Floated elements still live within the parameters defined by their parent element, ie the width available and horizontal position. They still interact with text and other elements inside that parent element (or other following elements). In that respect, they are quite different from absolutely positioned elements, which are removed from the document flow and don't interact with other elements ... but even then, if they have a positioned ancestor then they are restricted by the envelope of that ancestor and will use that as the basis for calculating size and dimension (although they can still be made to extend or exist outside that positioned ancestor).

Source of Quote

Since the element is floated and set outside of the normal document flow , it can now expand to the true width of the parent, instead of the fixed width initially defined.

Answer 2

Widths and the CSS Visual Formatting Model

In you example, you have the following:

<div class='window'>
    <div class='wrapper'>
        <div class='short'>short</div>
        <div class='long'>long</div>
    </div>
</div>

In the simplest case, .window is the containing block with a fixed width (500px). The child element .wrapper inherits the width from .window . The .long element has a width of 700px and it will trigger an overflow condition. Since .window has overflow: auto declared, the .window element will generate a horizontal scroll bar. Note that by using overflow: auto , .window establishes a new block formatting context, which is why the horizontal scroll bar appears on .window instead of the viewport/root element.

When you float .wrapper to the left, the .wrapper element defines an additional block formatting context. A new block formatting context will ignore the width inherited from its containing block and computes a new width sufficient to enclose the content (shrink-to-fit), which is why the pink background from .wrapper now extends the entire 700px in width.

You can trigger the same effect by adding position: relative to .window and position: absolute to .wrapper . However, this works because you set the height to .window , otherwise, the .window height would compute to zero since absolute elements are out of the flow and (unlike floats) will no longer affect how the .window content is laid out (not contribute to the height in this case).

As an aside, instead of using float: left on .wrapper , you can also try overflow: auto which will also establish a new block formatting context but this time the scrolling bar appears on .wrapper instead of .window .

The relevant documentation from w3.org is:

10 Visual formatting model details
10.3 Calculating widths and margins
10.3.5 Floating, non-replaced elements

Link: http://www.w3.org/TR/CSS2/visudet.html#float-width