Flex-basis won't shrink image in flexbox

Hi all,

Can someone please tell me why
#header-img { flex-basis: 10em;

doesn’t shrink the image id='header-img'

in this code? I am struggling to shrink the image so that it can be look presentable at the top of the page.

Here is the codepen:

Thanks! https://codepen.io/riz205/pen/vbKKXO?editors=1100

(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).

that is not what flex basis does.
Read this before going further, it will help.

to scale the image I would place it inside a container

Hey @ChrisCline1138 - thanks again for the help.

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!

flexbox is all about how we layout on the screen so we dont need to use things like “float”.

I actually think there is a bug in Chrome with flex-basis and images.

Open this in both Firefox and Chrome to see the difference

Article: Width vs flex-basis

you have something there.
That is the reason I used a container, seems to be a workaround. if the bug was not there it would not be needed.

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.