Can a maximum number of columns be set for a column-direction flexbox? I want to prevent the creation of a third column when the second one is filled. Instead, I prefer that the overflow extends both first columns while maintaining the element order.
https://i.sstatic.net/O2jVa.png
Take a look at this fiddle, and here's my code:
div.columns {
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 200px;
border: 1px solid red;
}
div.columns>div {
width: 60px;
padding: 0 8px;
border: 1px solid black;
}<div class="columns">
<div>foo 1</div>
<div>foo 2</div>
<div>foo 3</div>
<div>foo 4</div>
<div>foo 5</div>
<div>foo 6</div>
<div>foo 7</div>
<div>foo 8</div>
<div>foo 9</div>
<div>foo 10</div>
<div>foo 11</div>
<div>foo 12</div>
<div>foo 13</div>
<div>foo 14</div>
<div>foo 15</div>
<div>foo 16</div>
<div>foo 17</div>
<div>foo 18</div>
<div>foo 19</div>
<div>foo 20</div>
<div>foo 21</div>
<div>foo 22</div>
<div>foo 23</div>
<div>foo 24</div>
</div>If flexbox isn't the right solution for this, what would work better? No need to worry about supporting old browsers.