I am looking for a solution in the provided code snippet where the width of the .content div can automatically adjust to fit the .product divs inside it.
It is important that the width adjusts dynamically as there could be different numbers of products and a fixed width would not work well here.
HTML
<div class="container">
<div class="content">
<div class="product">
<p>string</p>
</div>
<div class="product">
<p>string</p>
</div>
<div class="product">
<p>string</p>
</div>
<div class="product">
<p>string</p>
</div>
<div class="product">
<p>string</p>
</div>
<div class="product">
<p>string</p>
</div>
<div class="product">
<p>string</p>
</div>
<div class="product">
<p>string</p>
</div>
<div class="product">
</div>
</div>
CSS
.container {
height:100px;
width:400px;
background:red;
padding:0 10px;
overflow-x: hidden;
}
.content {
background:#eee;
height:70px;
width: 2000px;
}
.product {
height:80px;
width:100px;
display: inline-block;
float: left;
}