JSFiddle - React, Tailwind, and code Playground

by Neal

HTML

<div class='overflow'>
    <div class='float'>a</div>
    <div class='float'>b</div>
    <div class='float'>c</div>
    <div class='float'>d</div>
    <div class='float'>e</div>
    <div class='float'>f</div>
    <div class='float'>g</div>
    <div class='float'>h</div>
    <div class='float'>i</div>
    <div class='float'>j</div>
    <div class='float'>k</div>
    <div class='float'>l</div>
    <div class='float'>m</div>
</div>

CSS

.overflow {
    width: 200px;
    height: 500px;
    margin: 5px;
    overflow: hidden;
    float: left;
}

.float {
    width: 150px;
    height: 100px;
    background: blue;
    color: white;
    line-height: 100px;
    font-weight: bold;
    text-align: center;
    margin: 5px;
}

JavaScript

var maxHeight = $('.overflow').height();
var floatHeight = $('.float').height();
var amountOfFloat = $('.float').length;

if(floatHeight * amountOfFloat > maxHeight){
    var minPer = Math.floor(maxHeight / floatHeight);
    var overflow = $('.overflow');
    $('.float').each(function(index, item){
        console.log(item, index);
        if(index%minPer == 0 && index != 0){
            overflow = $('<div>', {class: 'overflow'});
            $('body').append(overflow);
        }
        $(item).appendTo(overflow);
    })
}