title: Responsive divs width and height with css
body: <p>I am trying to build a horizontal scrolling layout, composed of image blocks:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="item"&gt;
       &lt;img src="http://placehold.it/200x300"&gt;
   &lt;/div&gt;
     &lt;div class="item"&gt;
       &lt;img src="http://placehold.it/400x300"&gt;
   &lt;/div&gt;
     &lt;div class="item"&gt;
       &lt;img src="http://placehold.it/300x300"&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I used <code>display:inline-block</code> and  <code>white-space: nowrap;</code> properties to achieve this, and it does work but browsers don't seem to recompute block widths on resize?</p>
  
  <p>Check here: <a href="https://jsfiddle.net/g597w3Lr/2/" rel="nofollow">https://jsfiddle.net/g597w3Lr/2/</a> and try resizing the browser..</p>
  
  <p>Here is a screen grab to better understand what is my problem:
  <a href="https://youtu.be/VxKo4gysc1o" rel="nofollow">https://youtu.be/VxKo4gysc1o</a></p>
  
  <ol>
  <li>At first all images are well positioned and i can scroll horizontally: perfect.</li>
  <li>I then resize the browser</li>
  <li>images are resizing, not the <code>.item</code> wrappers. White gaps appear :(</li>
  </ol>
  
  <p>Basically i was expecting same feature as with vertical scrolling, i.e. adapting width depending on content size.
  I actually dont even understand the logic here..</p>
  
  <p>Is there any way to get over this?</p>
  
  <p>Thanks!</p>