title: Avoid Clipping when using overflow:hidden;
body: <p>I have a section of a site that I want to set a max-height and then hide any content that overflows. The code looks like this: </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="blog-list"&gt;
     &lt;!-- CONTENT --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.blog-list{
      max-height: 243px;
      overflow: hidden;
  }
  </code></pre>
  
  <p>It works fine but the content inside has variable heights and I'm finding that content, every now and then, will appear clipped. Screenshot:</p>
  
  <p><a href="https://i.stack.imgur.com/ns0fk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ns0fk.jpg" alt="Screenshot showing clipping problem."></a></p>
  
  <p>Is there a way to solve this problem? I prefer a CSS only solution but would accept a JS/jQuery solution, if that is what is required.</p>