Flex-item with fixed width doesn't shrink in flex-direction:column?! Is it a bug?
here is my codepen: https://codepen.io/noobcoder137/pen/oNRzMaY
the flex item shrinks when the direction is set to row, eventho the item has a fixed width size, but it does not shrink when the direction is set to column, is it a bug or just a normal behavior? In any case, this behavior is not documented on developer.mozilla.org
according to the documentation on developer.mozilla.org:
"The flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, items shrink to fit according to flex-shrink."
3 Replies
Flexbox is only flexible on one axis at a time.
Schrink on a flex row is about the width.
Schrink on a flex column is about the height.
Give the flex container and the flex-items a height to see how this works.
you'Re absolutely right !! thank you
Flex-basis is a property for the children just for this. When it’s set to row , the flex basis applies to width; when set to column it applies to height. Ie flex-basis applies to the main axis size