Space Issue
This is the child of a flex and dont why there is this space in red here and flex direction is column, what could be the reason?
I uploaded it to codepen and code isfine there.
Why this is happening in both browsers i.e Chrome and Firefox.
https://codepen.io/hamzacodepen951/pen/abxyJwW
11 Replies
why dont you use nothing?
instead of trying to use flex on the children?
in fact, you should do a grid with 2 columns, where the left one is 1fr or min-content, and the right one is auto
the right one then has all the flexies
Are you talking about using grid on children inside element with class refinemenet_options??
Also why there is extra space there?
I only see the space in this view, which is caused by the row height matching the 3rd column
this is totally fine
you cant see space under each filter on big screen?
No
Which makes me believe it's related to the images. Likely your total page height increases with the images and your menu on the left is also taking the full page height, as they're part of the same grid
Whats is your recommendation?
Can you give us a code pen with the images included (or placeholders) so we can investigate the issue? Or a link to a test page where we can explore it better?
I doubt anyone will download those. While I doubt you're up to anything bad, "random" downloads from a Discord are generally avoided by most 🙂
Looking at the video you shared, it looks like it's only an issue when you have the sidebar, plus 2 columns for the images. When the images go to 3 columns, it fixes it.
Without seeing more, my guess is that it revolves around the parent of that entire area also being a flex item (or maybe grid).
That means the children are stretching in height to match the parent's height. When you have 2 rows of images, the height is taller. When you have 3 rows, the total height can shrink down.
So... I'd start with an
align-items: start and see if that works.
EDIT: this would be on the parent that's creating the entire layout, not the column itself. The column has a flex-direction: row, right? so if that first thing doesn't work, I'd look at doing a justify-content: start on the column itself.Hi Kevin, thank you for your message, I applied align-items: start on the parent container and it is working fine. Thanks alot
I have deleted the files that I had uploaded.