By default, flex items won’t shrink below their minimum content size (the length of the longest word or fixed-size element). To change this, set the min-width or min-height property.
Что картинка не уменьшается меньше родной ширины - не вижу.
Во втором случае выбор между картинкой с указанной в px шириной и текстом. Текст успешно сжимается.
Note: Variables do not work inside media queries and container queries. You can use the var() function in any part of a value in any property on an element. You cannot use var() for property names, selectors(!!!), or anything aside from property values, which means you can't use it in a media query or container query.
console.log("Down");
и console.log("Up");
— расскоментируйте их, откройте консоль и посмотрите, что происходит при скроле.