JSFiddle - React, Tailwind, and code Playground

by Chris Dobson

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="bs-example hidden">
    <div><p>Element inside bs-example</p></div>
    <div><p>Element inside bs-example</p></div>
    <div class="dropdown">
      <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
        Dropdown trigger
        <span class="caret"></span>
      </a>
    
      <ul class="dropdown-menu" aria-labelledby="dLabel">
          <li>a</li>
          <li>b</li>
          <li>c</li>
          <li>d</li>
      </ul>
    </div>
    <div><p>Overflowing element</p></div>
</div>

<input type="button" class="btn" value="Show Div" id="showDivBtn">
<input type="button" class="update-size btn hidden" value="Update Size">

CSS

.bs-example
{
    height: 80px;
    border:1px solid black;
    overflow:visible;
}

.btn {
    margin-top:100px;
}

JavaScript

$("#showDivBtn").click(function () {
    $(".bs-example").toggleClass("hidden", false);
    $(".update-size").toggleClass("hidden", false);
    hideOverflow();
});

$(".update-size").click(function() {
    $(".bs-example").css("height", "160px");
    hideOverflow();
});

function hideOverflow() {
    $(".bs-example").children().each(function() {
        if ($(this).get(0).offsetTop + $(this).get(0).offsetHeight > $(".bs-example").get(0).offsetTop + $(".bs-example").get(0).offsetHeight)
        {
            $(this).toggleClass("hidden",true);
        }
        else
        {
            $(this).toggleClass("hidden",false);
        }
    });
}

$(".dropdown").click(function() {
    $(".bs-example").css('height', '100px');
});