flex-shrink inconsistencies between Firefox and Chrome
A difference exists, but it seems that flex-shrink is not the root cause.
Could this be due to a browser bug, and if so, which browser follows specifications correctly?
It is not a bug per se. It appears to be more of an intentional deviation from the specifications, applied by Chrome.
flex-shrink: 1
The initial setting for a flex container is flex-shrink: 1, as outlined in the flexbox specification. This allows flex items to shrink to prevent overflowing the container.
Both Chrome and Firefox follow this guideline. Checking the default styles in developer tools confirms that both browsers apply flex-shrink: 1 to flex items.
For more information, refer to: How does flex-shrink factor in padding and border-box?
min-height: auto
In a column-direction flex container, the default setting for items is min-height: auto. In a row-direction container, items have min-width: auto. This sets the minimum size of a flex item to its content size or specified length along the main axis.
To learn more, visit: Why don't flex items shrink past content size?
Your Code
You have a column-direction flex container with two items: .navbar and #tall. Both Chrome and Firefox set these items to flex-shrink: 1 and min-height: auto by default. Inspection via dev tools confirms compliance with the spec.
The discrepancy arises here: The #tall item has height: 300%, significantly taller than the container. With flex-shrink: 1, overflow should be prevented. However, due to min-height: auto, items cannot shrink below their content height.
This behavior works in Firefox but not in Chrome. Why does the .navbar item in Chrome shrink below its button content when squeezed by #tall?
Firefox
The #tall element, with height: 300%, can't overflow due to flex-shrink. Its sibling, .navbar, must also shrink responsibly. Unable to go below content size because of min-height: auto, everything aligns with the spec.
Chrome
In Chrome, like in Firefox, #tall adheres to flex-shrink, preventing overflow. However, while .navbar should avoid shrinking beneath content size with min-height: auto, it does so anyway. Why?
Interventions
An intervention occurs when a user agent modifies standardized behavior for better user experience.
source: https://github.com/WICG/interventions
Referencing my answer here:
Since around 2017, Chrome might revert to min-width: 0 / min-height: 0 defaults, or dynamically apply them based on certain criteria (possibly an intervention). This shift could explain why layouts differ between Chrome, Firefox, and Edge.
Hence, the issue you face likely results from intended divergences rather than bugs. Firefox seems to comply closely with specifications.
Key Points
Note that my insights into Chrome's internal functioning are conjectural. I presume Chrome adjusts min-height based on personal observations—it's speculative. Such undocumented behaviors may change unpredictably over time.