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}
``
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
6 Replies
clevermissfox
clevermissfox8mo ago
Is there supposed to be a screenshot? Since you said "as you can probably see the last element of the flex is stretched out..."
lko
lko8mo ago
No description
clevermissfox
clevermissfox8mo ago
The default behavior of align-items is "stretch". If you set any other value on the parent ("align-items: start; align-items: center; align-items: end") it will be its intrinsic size. You can also use the dev tools with flex (or grid) to experiment with the properties justify-content, align-content, and align-items. When you open dev tools and select the element that has "display: flex;". In the styles, there's a little icon next to the "display: flex" declaration, if you click on that icon a little popover comes up and you can experiment with these properties.
lko
lko8mo ago
It doesn't work if I set align-items start
clevermissfox
clevermissfox8mo ago
Oh it's bc of the flex-grow you have on the children. Grows to take up all the available space
Kevin Powell
Kevin Powell8mo ago
I think you might want to use grid, instead of flex, here with flexbox, each row of content is independent of the other rows. With grid, you have, well, a grid, so they all work together.
Want results from more Discord servers?
Add your server