JSFiddle - React, Tailwind, and code Playground

by doug65536

HTML

<button id="show">Show all</button><button id="hide">Hide overflowed</button>
<div id="container">
    <div id="wrap">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <br/>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <br/>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <br/>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

CSS

#container {
    position: relative;
    width: 400px;
    height: 400px;
    overflow: hidden;
    border: solid red 1px;
    background: red;
    padding: 16px;
}
#wrap {
    position: relative;
    width: 1000px;
}
.box {
    border: solid black 1px;
    position: relative;
    width: 166px;
    height: 166px;
    display: inline-block;
    background: white;
}

JavaScript

$(function() {
    var container = $('#container');
    $('#hide').on('click', function() {
        var w = container.width();
        var h = container.height();
        container.find('#wrap div').each(function() {
            var item = $(this);
            var pos = item.offset();
            var item_w = item.width();
            var item_h = item.height();
            var clipped = (pos.top + item_h > h) || (pos.left + item_w > w);
            item.css({visibility: clipped ? 'hidden' : 'visible'});
        });
    });
    $('#show').on('click', function() {
        container.find('#wrap div').css({visibility: 'visible'});
    });
});