How to set flex-basis on secondary axis

Question

How to make a flex item to shrink in secondary axis?

For example, I have container which has lots of items inside. They all are positioned in column, but I want they width also can be shrinked:

.container {
  display: flex;
  flex-direction: column;
  .item {
    width: 200px;
    flex: 0 1 @item-height;
    //flex-shrink here means Y-axis. How to set flex-shrink for X-axis??
  }
}

Answer 1

The cross space or cross size is calculated according to the layout algorithm:

Determine the available main and cross space for the flex items. For each dimension, if that dimension of the flex container’s content box is a definite size, use that; if that dimension of the flex container is being sized under a min or max-content constraint, the available space in that dimension is that constraint; otherwise, subtract the flex container’s margin, border, and padding from the space available to the flex container in that dimension and use that value. This might result in an infinite value.

https://www.w3.org/TR/css-flexbox-1/#layout-algorithm

The cross-axis is affected by align-items and can be affected by width, max-width, height, max-height, etc: Cross-axis MDN notes

So for the equivalent of flex-shrink on the cross axis, you could try using align-items and for the equivalent of flex-basis you can use percentage max-width/max-height.

Answer 2

You can simply use width: 100%; max-width: 200px; on .item. This should cause your items to shrink to the width of the parent element when it's below 200px. Otherwise the items stay at 200px width.

Works at least as long as you don't use flex-wrap.