HTML & CSS · Senior · Question 28 of 75
Why can a long word or a wide table "blow out" a 1fr grid column?
- ✓Correct answer:
1frmeansminmax(auto, 1fr): the track can't be narrower than min-content - 2
fris computed from the browser window's width, not the container's - 3It's an engine bug that's already fixed in the latest browsers
Explanation
For fr tracks the default minimum is auto, i.e. no smaller than the minimum content. A wide item grows the track, and the columns stop being equal. The fix is minmax(0, 1fr) in the track definition or min-width: 0 / overflow: hidden on the item.