title: Min-width at body causes scrollbar issues
body: <p>Im trying to create a responsive Tagcloud. <br>
  But somehow I have problems in the max-width 400px part. <br><br> Although Im already using width: auto and box sizing border-box, it generates a horizontal scrollbar at 326px in Chrome as u can see in the Picture below.</p>
  
  <p><a href="https://i.stack.imgur.com/rBfYp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rBfYp.png" alt="enter image description here"></a></p>
  
  <p>Anybody got a Solution for this? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
   color:#122e45;
   font-family: Verdana,sans-serif;
   font-size:11px;
   line-height:16px;
   background-color:#fafafa;
   margin:0;
   padding:0;
   min-width:320px;
  }
  
  /* Helpers */
  .before:before {
      display: table;
      content: " ";
  }
  
  .after:after {
      content: " ";
      display: table;
      clear: both;
  }
  
  #tagCloud {
   max-width:960px;
   margin: 0 auto;
  }
  
  #tagCloud .quarter {
   width:25%;
   padding: 10px 5px;
   box-sizing:border-box;
   max-width:240px;
   float:left;
  }
  
  
  #tagCloud ul {
   list-style-type:none;
   margin:0;
   font-size:14px;
   padding:0;
  }
  
  #tagCloud ul li {
   height:26px;
  }
  
  #tagCloud ul li a {
   text-decoration:none;
   color:#122e45;
  }
  
  
  @media screen and (max-width: 760px) {
   #tagCloud .quarter {
    min-width:33.3333%;
   }
   
   #tagCloud .last {
    clear:left;
    min-width:100%;
   }
   
   #tagCloud .last:before {
       display: table;
       content: " ";
   }
   
   #tagCloud .last:after {
       content: " ";
       display: table;
       clear: both;
   }
   
   #tagCloud .last li {
    display:block;
    float:left;
    margin-right: 20px;
   }
  }
  
  @media screen and (max-width: 580px) {
   #tagCloud .quarter {
    min-width:50%;
   }
   
   #tagCloud .last li {
    display:list-item;
    float:none;
    margin-right: 0px;
    width:100%;
   }
   
   #tagCloud .last {
    clear:none;
   }
   
   #tagCloud .last:before {
       content: "";
   }
   
   #tagCloud .last:after {
       content: "";
   }
  }
  
  @media screen and (max-width: 400px) {
   #tagCloud .quarter {
    width: auto;
       float: none;
       max-width: initial;
       min-width: initial;
       box-sizing:border-box;
   }
   
   #tagCloud .last:before {
       content: "";
   }
   
   #tagCloud .last:after {
       content: "";
   }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id="cmsContainer"&gt;
    &lt;div id="tagCloud" class="cmsElement before after"&gt;
       &lt;div class="quarter"&gt;
        &lt;ul&gt;
         &lt;li&gt;&lt;a href="#"&gt;IT Jobs&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Jobs für Ingenieure&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Fahrzeugbau &amp; Zulieferer&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Personal&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Vertrieb&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Maschinenbau&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Beratung, Consulting&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Rechnungswesen&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Immobilien und Bau&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
       &lt;/div&gt;
       &lt;div class="quarter"&gt;
        &lt;ul&gt;
         &lt;li&gt;&lt;a href="#"&gt;Jobs im Marketing&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Pharma, Chemie&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Management&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;80.000 EUR Plus&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Sachbearbeitung&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Controlling&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Ärzte und Mediziner&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Pflege&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Jobs für SAP-Spezialisten&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
       &lt;/div&gt;
       &lt;div class="quarter"&gt;
        &lt;ul&gt;
         &lt;li&gt;&lt;a href="#"&gt;Sekretariat&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Recht und Steuern&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Banken, Finanzen&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Versicherung&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Energie&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Jugend- &amp; Sozialarbeit&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Behörden, Kommunen&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Verbände, Vereine&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Schule und Bildung&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
       &lt;/div&gt;
       &lt;div class="quarter last"&gt;
        &lt;ul&gt;
         &lt;li&gt;&lt;a href="#"&gt;Auslandsjobs&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Direkteinstieg&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Trainee&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Ausbildung&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Praktikum&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Angebote der Woche&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Jobs nach Einsatzort&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Jobs nach Thema&lt;/a&gt;&lt;/li&gt;
         &lt;li&gt;&lt;a href="#"&gt;Jobs nach Unternehmen&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
       &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>