JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
</div>
CSS
body
{
margin:0;
}
#container
{
height: 600px;
min-width: 150px;
margin-right: 10px;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: inline-flex;
-webkit-flex-flow: column wrap;
-moz-flex-flow: column wrap;
-ms-flex-flow: column wrap;
-o-flex-flow: column wrap;
flex-flow: column wrap;
background-color: #CFC;
}
#container .box
{
width: 100px;
height: 100px;
margin: 5px;
background-color: silver;
}
JavaScript
// Find the biggest offset right
var maxOffsetRight = 0,
currentOffsetRight;
$('#container').children().each(function(index) {
currentOffsetRight = $(this).position().left + $(this).outerWidth(true);
if (currentOffsetRight > maxOffsetRight) {
maxOffsetRight = currentOffsetRight;
}
});
var offsetLeft = $('#container').position().left;
$('#container').css('width', maxOffsetRight - offsetLeft);