Utilizing the properties display: table and display: table-cell, I am attempting to evenly distribute some divs within a parent container. However, they all end up on the same row, causing overcrowding when there are too many divs like this:
Even though I have set a min-width for the children, it seems to be disregarded. Is there a way to automatically wrap the children into multiple lines if they exceed a certain height? Since I won't always know the exact number of children, I would prefer to keep them within a single parent div.
HTML
<div class="panel-body select-body">
<div class="board">
<input type="checkbox"><span class="select-label">/a/</span></input>
</div>
<div class="board">
<input type="checkbox"><span class="select-label">/a/</span></input>
</div>
<div class="board">
<input type="checkbox"><span class="select-label">/a/</span></input>
</div>
<div class="board">
<input type="checkbox"><span class="select-label">/a/</span></input>
</div>
<div class="board">
<input type="checkbox"><span class="select-label">/a/</span></input>
</div>
<div class="board">
<input type="checkbox"><span class="select-label">/a/</span></input>
</div>
<div class="board">
<input type="checkbox"><span class="select-label">/a/</span></input>
</div>
<div class="board">
<input type="checkbox"><span class="select-label">/a/</span></input>
</div>
</div>
CSS
.select-body {
display: table;
table-layout: fixed;
width: 100%;
}
.board {
border: 1px solid blue; /* temporary */
width: 15%;
min-width: 100px;
height: 30px;
display: table-cell;
}
.board > input[type="checkbox"] {
vertical-align: middle;
margin-left: 8px;
margin-right: 5px;
}
.select-label {
position: absolute;
margin-top: 3px;
}