Fluid width for container of inline, non-wrapping elements <p>I'm having a little CSS trouble.</p> <p>I have some div elements structured like the following example. There are a dynamic number of class="block" divs, each with a fixed width:</p> <pre><code>&lt;div class="outer-container"&gt; &lt;div class="inner-container"&gt; &lt;div class="block"&gt;text&lt;/div&gt; &lt;div class="block"&gt;text&lt;/div&gt; &lt;div class="block"&gt;text&lt;/div&gt; &lt;!-- More "block" divs here --&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>My goal is to find a CSS-based solution that will.</p> <ol> <li>Display the <code>class="block"</code> divs inline, without them wrapping to new lines.</li> <li>Support a variable number of <code>class="inner-container"</code> divs like the one above, each displayed as its own line.</li> <li>Have the outer container fluidly <code>"shrink-wrap"</code> to match the width of its contents.</li> </ol> <p>Any suggestions?</p>