Div width equal to its contents (pure CSS)

by Marventus

HTML

<div id="wrapper">
    <div id="content">
        <!-- this should be as wide as all of its contents combined -->
        <div class="inner_item"></div>
        <div class="inner_item"></div>
        <div class="inner_item"></div>
        <div class="inner_item"></div>
    </div>
</div>

CSS

#wrapper, #wrapper * {
    border:0;
    margin:0;
    padding:0;
}
#wrapper {
    background-color:red;
    height:100px;
    overflow-x:scroll;
    width:500px;
}
#content {
    display:inline-block;
    height:100px;
    background-color:blue;
    white-space:nowrap;
}
.inner_item {
    display:inline-block;
    width:250px;
    height:100px;
    background-color:green;
}
.inner_item:first-child {
    margin-left:0;
}