flex-shrink

Specifies how much of this element's space may be given back to the container when there isn't enough for all of the elements.

This property is meaningful only on elements that are directly within a flexbox container. Specify a numeric value that has no units. That value will be used in the algorithm that nibbles away at each element's space in order to squeeze all of them into the container.

Set this property to 0 in order to prevent the element from shrinking below its initial basis.

When a flexbox container has too many elements and not enough space to fit them all, each item is shrunk in order to accomodate all of them. But if the total width of all elements is less than the width of the container itself, then none of the elements will shrink.

This property determines how much of this element's original width is removed, using this formula:

    W = container's width

    /* individual element widths */
    fb[0] = element[0] flex-basis (or width)
    fb[1] = element[1] flex-basis (or width)
    fb[N-1] = element[N-1] flex-basis (or width)
    
    /* total of all element's widths */
    T = sum(fb[0] + fb[1] + ... + fb[N-1])
    
    /* container's deficit */
    D = T - W
    
    /* individual element shrink-factors */
    sf[0] = element[0] flex-shrink factor
    sf[1] = element[1] flex-shrink factor
    sf[N-1] = element[N-1] flex-shrink factor
    
    /* total of all shrink-factors */
    S = sum(sf[0] + sf[1] + ... + sf[N-1])
    
    /* amount of width to remove from each element's original width */ 
    rw[0] = sf[0]/S * D
    rw[1] = sf[1]/S * D
    rw[N-1] = sf[N-1]/S * D