I'm currently exploring possible solutions for making a parent div adjust its size to fit content that is deliberately set not to wrap. To better illustrate my issue, here is a jsfiddle showcasing the problem: jsfiddle.net/wtQfV
Here is the code example:
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;
}
Are there any possible solutions for this issue, or should I come to terms with the idea that I might need a javascript-based solution?