Flex grow but equal width
Hello there, first of all, here's my code: https://jsfiddle.net/KonerDev/14k956wz
I'm not completely satisfied with the code because not all cards have the same width. The last ones usually have a larger width since they still need to take up the entire space due to the flex-grow property. But I want all cards to have the same width. How can I achieve that?
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
2 Replies
I'm giving you a solution using grid instead of flex for two reasons: it looks like you are trying to make a grid, so it makes more sense to use grid here, and I don't know how to achieve that effect with flex only 😄
https://codepen.io/D10f/pen/QWJzNoV
yeah, seconded that if you need a grid layout you should use
display: grid; over flex
the only thing I could think of would be to remove the flex-grow with javascript for the overflowing items, but that's going to be bug prone and potentially finnicky