Avoid Clipping when using overflow:hidden;
<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>