4 Questions about Flex items in this code.

Question

I have 4 questions about this code:

1) Why is there a huge (vertical) space between orange and violet flex items?

2) Why is 3rd item greater than 1st one (they both have the same class)?

3) Where's the 4th element?

4) Why doesn't overflow-y: scroll work?

https://code.sololearn.com/WR8M58tfW0L6/?ref=app

Answer 1

Ok.. I haven't found the answers, but I figured out some things.

1) I still don't get why is that happening, could be because of "flex wrap" property, not sure

2) 3rd item is not greater than the 1st one, it's actually just combined with 4th item. So, somehow, wrap didn't work on 4th item.
Basically, the last item is 3rd and 4th together on one line.

3) As I previously said, next to the 3rd item.

4) Overflow property works, it's just that height is greater than content. (The reason I used this property is because I thought that 4th item wasn't visible)

So, now I have a question why's 4th element not wrapped?
And, now it "clicked"! Because the size of the 3rd and 4th element is not greater than parents width.

Ok, so... I still don't have the answer to the first question, about vertical space.

I'll continue to investigate. If you know why, please share your answer!

Answer 2

Hi @Kvanti ! I have the answer to your first question.
It's about "align-content" property. Here is a beautiful explanation of what this property does:

https://stackoverflow.com/a/42888700

Couldn't have explained it better myself!

In short, this property was set to "stretch" by default, and that's why you got those big vertical gaps between your items.
Anyway, you should check "gap" property too!

Here's your code with align-content and justify-content properties (the second one is added because it nicely splits 3rd and 4th item).

https://code.sololearn.com/WQOnfXezZxu3/?ref=app

(Yeah.. I'm not crazy, as far as I know, it's just nobody answered and I felt like I was talking to myself. Also, I didn't want to delete the question and answer, because, who knows, maybe it'll be useful to someone else).