Kevin Powell - CommunityKP-C
Kevin Powell - Community2y ago
8 replies
lko

how to prevent last item of flex to grow

section {display:flex; flex-wrap:wrap; gap:1rem}
div {background-color:red; width:0; min-width: 100px; height: 100px; flex-grow: 1}
``
html
<section>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</section>
```

Sorry for the formatting but I'm on my phone. As you can probably see the last element of the flex is stretched out but I want it to be the same size as the other siblings, how can I do that? I cannot set a max width otherwise Flex grow won't work properly and I can't even disable Flex grow on it because I want it to be the same size as other children, not the min-width size. And also, in this case it could happen that there is not 1 but 2 extra children
Was this page helpful?