CSS Grid minmax(min-content, auto) overflow in nested flex containers
0 reputation · 24 Oct 2021, 08:05 UTC
When defining a grid track size using minmax(min-content, auto), the browser calculates the minimum boundary based on the intrinsic size of the children. However, when the grid item is a nested flex container, the layout often fails to shrink the track to the expected minimum, resulting in horizontal overflow.
The issue arises because the min-content calculation for the grid track interacts with flex-basis and flex-shrink properties of the nested flex items. There is a discrepancy in how Webkit and Blink engines prioritize the minimum-width calculations of flex-item children when they are wrapped in a grid track constrained by intrinsic sizing.
- How do different browser engines resolve sizing conflicts between min-content constraints and flex-shrink properties within a minmax track?
- Is there a specific CSS property to force the grid track to respect the flex-item's shrink limit without overflowing?