Why isn't parent div width stretching to width of child

Question

Look at this jsfiddle:

#content {
    background: #ff0000;
    min-height: 200px;
}
.container-fluid {
    min-width: 2000px;
}

<div id="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12">
                <h1>Some title here</h1>
            </div>
        </div>
    </div>
</div>

Why is the width of #content not stretching to be 2000px instead of being the width of the viewport? What do I need to do to make content stretch so that no matter what min-width is set on container-fluid #content will always stretch to fit it

Was just writing that, here is the [**demo**](http://jsfiddle.net/w9k2sz52/2/) — Ruddy, Feb 20 '15 at 15:47
possible duplicate of [Make Div Width Equal To Child Contents](http://stackoverflow.com/questions/450903/make-div-width-equal-to-child-contents) — Ruddy, Feb 20 '15 at 15:48
@Ruddy He wants to to fit the width of the child if the child is bigger than X amount. — Austin Collins, Feb 20 '15 at 15:56

score 5 · Accepted Answer · answered Feb 20 '15 at 15:51

5

Set #content to inline-block, and then set min-width to 100%. Note that setting width to 100% won't have the desired affect.

#content {
    background: #ff0000;
    min-height: 200px;
    min-width: 100%;
    display:inline-block;
}

answered Feb 20 '15 at 15:51

Mike

8,767
8
49
103

`min-width` is not needed. – Adrift Feb 20 '15 at 15:55

score 2 · Answer 2 · answered Feb 20 '15 at 15:58

2

Adding a float will make the parent element the same width as the child:

#content {
    background: #ff0000;
    min-height: 200px;
    float: left;
}

answered Feb 20 '15 at 15:58

erier

1,744
1
11
14

score 1 · Answer 3 · answered Feb 20 '15 at 15:48

1

#content {
    background: #ff0000;
    min-height: 200px;
    display: inline-block;
}

answered Feb 20 '15 at 15:48

Bipu Bajgai

394
1
3
13

Austin Collins · Answer 4 · 2015-02-20T15:53:20.160

You could use

width:auto;

This should mean it stretches to the width of its contents.

EDIT:

The min-width property in CSS is used to set the minimum width of a specified element. The min-width property always overrides the width property whether followed before or after width in your declaration. Authors may use any of the length values as long as they are a positive value.

You need to set a max-width or width with it. Say you had a width of 80% and a min width of 400px, it will be no smaller then 400px even if 80% of the page is 200px.

You could give the content a min width forcing the div to be auto and be no smaller then the content.

score 0 · Answer 5 · answered Feb 20 '15 at 16:01

0

Could #content determine the width, while .container-fluid expands to fill it? Instead of the other way around.

#content {
    background: #ff0000;
    min-height: 200px;
    width:2000px;
}
.container-fluid {
    width: 100%;
}

answered Feb 20 '15 at 16:01

pmcneil18

31
3

score 0 · Answer 6 · answered Feb 20 '15 at 16:05

By adding

position:absolute

to your CSS declaration for #content, you force the CSS interpreter to check what elements are inside #content, therefore achieving desired effect.

The problem with absolute positionning is that it remove the element from the natural workflow of the document. Therefore, you are better wrapping the element unto which you want to apply absolute positionning inside another element. This one will stay in the natural workflow of the DOM.

See this jsfiddle: https://jsfiddle.net/7Ls47d83/4/

Google "CSS box model" for more interesting articles and post about this, or this article.

Why isn't parent div width stretching to width of child

6 Answers6