(Before posting this issue here I googled ‘flex-basis won’t shrink image’ and didn’t find anything helpful that I could understand. I also checked the MDN documents but couldn’t find anything helpful that I could understand).
I read that css-tricks article and was under the impression that flex-basis adjusted the size of an item, and since the image is an item I presumed that flex-basis would adjust its size before anything else happened within the flex-box. Turns out I was wrong?
Also, why did you place the image within a div-container and then place that container within the flex-box? May you please explain why you did what you did, so that I can learn from it? Thanks!
Flex-shrink is the opposite of flex-grow, determining how much a square is allowed to shrink. It only comes into play if the elements must shrink to fit into their container — i.e. when the container is just too small. Its main use is to specify which items you want to shrink, and which items you don’t.
Use display: flex; to create a flex container.
Use justify-content to define the horizontal alignment of items.
Use align-items to define the vertical alignment of items.
Use flex-direction if you need columns instead of rows.
Use the row-reverse or column-reverse values to flip item order.
