title: CSS column-count and Chrome bug: how to avoid overflow content being cropped
body: <p>When <code>column-count</code> is used, it seems to crop any <strong>overflow</strong> content.</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>#columns {
    -webkit-column-count: 1;
    -webkit-column-gap: 10px;
    /*-webkit-column-fill: auto;*/
    -moz-column-count: 1;
    -moz-column-gap: 10px;
    /*-moz-column-fill: auto;*/
    column-count: 1;
    column-gap: 10px;
    /*column-fill: auto;*/
    border: 1px solid red;
    overflow: visible;
  }
  .pin {
    width: 100%;
    display: inline-block;
    padding: 10px;
    margin-bottom: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="columns"&gt;
  
    &lt;div class="pin"&gt;
  
      &lt;a href="#"&gt;
        &lt;span class="onsale"&gt;Sale!&lt;/span&gt;
        &lt;img src="#.jpg" /&gt;
      &lt;/a&gt;
      &lt;h3&gt;Product 1&lt;/h3&gt;
      &lt;/a&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Result:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/hso3H.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hso3H.png" alt="enter image description here"></a></p>
  
  <p>Any ideas how I can fix this?</p>
  
  <p><strong>EDIT 1:</strong></p>
  
  <p>It seems it is a <strong>bug</strong> in <strong>Chrome</strong>.</p>
  
  <p>it is fine on Firefox though:</p>
  
  <p><a href="https://i.stack.imgur.com/EWNdU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/EWNdU.png" alt="enter image description here"></a></p>
  
  <p><strong>EDIT 2:</strong></p>
  
  <pre><code>span.onsale {
      min-height: 3.236em;
      min-width: 3.236em;
      padding: .202em;
      font-size: 1em;
      font-weight: 700;
      position: absolute;
      text-align: center;
      line-height: 3.236;
      top: -.5em;
      left: -.5em;
      margin: 0;
      border-radius: 100%;
      background-color: $highlight;
      color: $highlightext;
      font-size: .857em;
      -webkit-font-smoothing: antialiased;
  }
  </code></pre>