为何提交按钮缩放失响应？CSS Grid响应式问题排查

Let's break down the core issue here and fix it step by step.

The Root Cause: Different Element Default Behaviors #

The key difference between your two "buttons" is the underlying HTML element, and browsers handle these elements very differently by default:

• The working "Select file" button: This is actually a <label> element styled to look like a button. Labels are generic text-container elements—when you set a percentage width on them (which works in your grid layout), they'll strictly adhere to that relative width regardless of page scaling or container size changes. They don't have built-in layout logic that prioritizes content over your explicit width rules.

• The shrinking "Take action" button: This is a native <button> element. Browsers apply special default styles and layout behavior to form buttons like <button type="submit">:

  • They often enforce a content-based minimum width to keep text readable.
  • When container space gets tight (like during page scaling or sidebar expansion), browsers may override your explicit width setting to shrink the button and fit its content, rather than sticking to the percentage you defined.

Your CSS applies the same .custom-file-upload class to both, but the element type's native behavior overrides that shared styling in the case of the button.

Secondary Contributing Factor #

While not the main issue, the different padding-left values on your grid containers (22.5% for the file select, 11% for the submit button) change the available width each button has to work with—but this doesn't explain why one shrinks and the other doesn't.

Fixes to Make Them Behave Consistently #

You have a couple of solid options to resolve the inconsistency:

Option 1: Force the Button to Respect Your Width Rules #

Add these styles to your .custom-file-upload class to override the browser's default button behavior:

.custom-file-upload {
  /* Keep your existing styles */
  display: block; /* Ensures width is applied consistently */
  min-width: 0; /* Removes the browser's content-based minimum width */
  box-sizing: border-box; /* Makes sure padding/border don't add to the defined width */
}

This tells the browser to treat the button like any other box element, following your explicit width instead of its own built-in logic.

Option 2: Use a Label for the Submit Action Too #

Match the file select pattern by using a <label> tied to a hidden submit input. This ensures both "buttons" use the same element type, so their layout behavior will be identical:

<div class="ttg_text_grid3">
  <label for="submit-input" class="custom-file-upload">Take action</label>
  <input id="submit-input" type="submit" style="display: none;" onclick="this.disabled = true;">
</div>

(Note: I adjusted the onsubmit logic to onclick since we're now triggering via a label.)

内容的提问来源于stack exchange，提问作者RTC222