title: increase width on overflow to adjust scrollbars
body: <p>What should be my CSS to make a div adjust its width when scrollbar is visible. </p>
  
  <p>Here is the scenario, I have a div and child elements</p>
  
  <pre><code>&lt;div id="ListHolder"&gt; 
       &lt;ul id="LeftList"&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
       &lt;/ul&gt;
  
       &lt;ul id="RightList"&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;
       &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/vHQ1s.png" alt="example picture"></p>
  
  <p>I want to adjust my div width automatically for scrollbars when it has overflow. Means when there is no scrollbar it should be like image on left side and when scrollbars becomes visible it should automatically adjust width for scrollbars. I do not want to use javascript but with pure CSS and HTML. And I believe it is possible with CSS and HTML only.</p>
  
  <p>Considering above UL Lists, my CSS is something like </p>
  
  <pre><code> #ListHolder
   {
       display:inline-block;
   }
   #ListHolder &gt; ul
   {
       width:250px;     //&lt;---Necessary to keep fixed width not percentage
       display:inline-block;
   }
   #ListHolder &gt; ul &gt; li
   {
       display:inline-block;
   }
   #LeftList
   {
       float:left;
   }
   #RightList
   {
       float:right;
   }
  </code></pre>