Form Elements in a CSS Grid

TIL input elements in a CSS Grid will cause CSS Grids to lose their responsiveness. You can fix in Chrome by removing the min-width (which doesn't appear to be specified in Inspector). Text/images squeeze as expected. Repro:

• Resize window until horizontal scrollbars appear
• Expected: No horizontal scrollbars, content keeps shrinking.
• Actual: Inputs stops squeezing and horizontal scrollbar appears at ~.

Step 1: Remove `min-width: auto` from Grid Items

Step 2: Add Max Widths

Step 3: Make file and submit input text wrap

Step 4: Make range, number, and progress full-width

If you go one step further and make input/select widths `width: 100%`, then Steps 1 & 2 are redundant and not needed. But Step 1 fixes another issue (`overflow-x` elements) and Step 2 seems like a sensible default.