Simple code on code sandbox, which compares two cards I'm building. The first card is just a placeholder to organize the flexbox and configure the hover effect. And the second one does make reference to images.
I'm trying to understand why the images are getting bigger than the box-contrained from the first parent - since I'm using object-fit: cover. Can anybody explain me why?
I understand what is happening. FlexBox and images can sometimes work weird. But it's only weird because there's a lot of params to be track of and not because it is a broken feature.
Going into firefox dev tools, I saw that the second card had its header clamped by its minimum size, since the default configuration in flexbox is "A flex item cannot be smaller than the size of its content along the main axis".
The img element said to my flexbox column axis: "hey, I need more space", so my flexbox said: "sure". Now, putting into the header class:
min-width: 0;
min-height: 0;
overflow: hidden;
my flexbox answers: "sorry, but here we are allowed to go beyond minimum size. Deal with it".