Flexbox variable width

HTML-CSS
1

Hello

CODE 1 : [https://codepen.io/anon/pen/xNQXaQ](http://variable height) (For variable height)
Here the height of container depends on the number of div’s in it.

I want to replicate this for variable width and fixed heigtht. even 20 divs acquire the whole width.
I believe this is because div is a block element
My attempt for variable width is in code 2

CODE 2 : [https://codepen.io/anon/pen/YbRrYb](http://variable width)

2

This case is a weakness of flexbox. You can set it to inline-flex but it will not grow on the cross axis. Instead, try inline-grid:

display: inline-grid;
grid-auto-flow: column;
grid-template-rows: repeat(6, auto);

This isn’t responsive, though, so be careful how you use it.

1 Like