CODEWITHSUNDEEP
htmlcss
Finglish
Finglish

Reputation: 9956

is it possible with pure css to make parent div resize to fit inline-block white-space nowrap content

I am trying to work out if there is anyway to make a parent div resize to fit content when the content is intentionally being prevented from wrapping. As an example here is a jsfiddle jsfiddle.net/wtQfV to illustrate my problem.

The example code:

HTML

<div class="box_holder">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>

CSS

.box_holder{
    border:1px solid red;
    white-space:nowrap;
}

.clearfix{
    clear:both;
}

.box{
    width:30px;
    height:20px;
    margin:10px;
    background-color:red;
    display:inline-block;
}

Is there any work arounds for this or should I just accept I am chasing rainbows and I need a javascript solution.

Upvotes: 3

Views: 9232

Answers (2)

Rafael
Rafael

Reputation: 802

Try this:

Remove the white-space:nowrap; in the css .box_holder

http://jsfiddle.net/wtQfV/4/

or add the display:inline-block; on the .box_holder

http://jsfiddle.net/wtQfV/6/

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

You can make the .box_holder element be inline-block as well..

.box_holder{
    border:1px solid red;
    display:inline-block;
    white-space:nowrap;
}

Demo at http://jsfiddle.net/gaby/wtQfV/5/

And if you want it to still maintain 100% width when there is room, you can add min-width:100% to it

.box_holder{
    border:1px solid red;
    display:inline-block;
    min-width:100%;
    white-space:nowrap;
}

Demo at http://jsfiddle.net/gaby/wtQfV/7/

Upvotes: 12

Related Questions