flex-shrink tells a flex item how willing it is to give up space when its container is too small. Think of a crowded bench: every item may need to scoot over, but some can be more accommodating than others. section 12.4 section 12.7
Every flex item starts with flex-shrink: 1, so items are treated equally when shrinkage is calculated. If items begin at different widths, the wider one generally loses more width—because apparently it had more room to spare. section 12.4
item {
flex-shrink: value;
}
Set flex-shrink on an individual flex item with a numeric value. section 12.4
Use values to decide which items should yield space:
- Use 1 for the default behavior: shrink along with the other items. section 12.4
- Use a value greater than 1 to make an item shrink more than its neighbors. section 12.4
- Use a value between 0 and 1 to make an item shrink less. section 12.4
- Use 0 to prevent the item from shrinking. section 12.4
A huge value is not a tiny-item ray gun. A browser will not shrink an item below the minimum size needed to display its content, so an item that stops shrinking may have reached that limit. section 12.4
Keep a thumbnail from being squeezed
In a thumbnail list, make each list item a flex container. Set the image wrapper to flex-shrink: 0 so its thumbnail keeps its size, then set the text entry to flex-grow: 1 so it can take available room. This keeps the image from being squashed while the description occupies the remaining space. section 12.5
.dictionary-container {
list-style-type: none;
}
.dictionary-item {
display: flex; #1
}
.dictionary-image {
flex-shrink: 0; #2
}
.dictionary-entry {
flex-grow: 1; #3
}
This thumbnail-list CSS pairs flex-shrink: 0 on the image with flex-grow: 1 on the text. section 12.5
REMEMBER: flex-shrink handles the not-enough-room situation. Its companion flex-grow handles extra room, and flex-basis suggests the size an item grows or shrinks from. section 12.4 section 12.7
