title: Overflow auto for div with inline-blocks inside
body: <p>I have next markup: </p>
  
  <pre><code>&lt;div style="border: 1px solid black; width: 200px; height: 60px; overflow-x: auto"&gt;
      &lt;img src="/images/thumbs/doc.png" width="100" height="60" style="display: inline-block; vertical-align:middle;"&gt;
      &lt;div style="display: inline-block; vertical-align: middle;"&gt;test&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Actually I use jquery ui resizable plugin. When I resize the outer div and it becomes too small I want horizontal scrollbar appears. But instead the label near the image goes down. how to prevent this effect? Ideally I would like to apply text-overflow:elipsis effect to the label also, so firstly it shorts with "..." and then scrollbar appears. But I can't figure out how to prevent the label "test" goes down when I set small width</p>