响应式数量选择器SCSS实现：让加减按钮占最小必要空间

要实现加减按钮仅占用图标所需最小宽度、输入框占满剩余空间的响应式布局，只需调整Grid布局的列宽设置，同时补充必要的自适应样式，具体修改如下：

修改后的SCSS代码 #

.quantity-select-container {
  display: grid;
  // 核心：按钮列用min-content取内容最小宽度，输入框列用1fr占满剩余空间
  grid-template-columns: min-content 1fr min-content;
  grid-template-rows: 1fr;
  gap: 0;
  border: 1px solid black;
  grid-template-areas: "minus input plus";
  // 可选：限制容器最大宽度，避免大屏下输入框过宽
  // max-width: 320px;

  .btn-minus {
    grid-area: minus;
  }

  input {
    text-align: center;
    grid-area: input;
    padding: 2px;
    width: 100%;
    // 防止极端小屏输入框过窄，保证至少能显示一个数字
    min-width: 40px;
    // 确保padding不会增加元素总宽度，避免溢出
    box-sizing: border-box;
    // 可选：隐藏默认number输入框的增减按钮，统一用自定义按钮控制
    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
    -moz-appearance: textfield;
  }

  .btn-plus {
    grid-area: plus;
  }

  .btn-minus,
  .btn-plus {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    // 给按钮加少量内边距，提升点击体验且不占用多余空间
    padding: 0 8px;
    // 保证按钮和输入框高度一致
    height: 100%;
    box-sizing: border-box;
  }
}

关键说明 #

1. min-content的作用：让加减按钮所在列自动适配图标实际尺寸，仅占用必要的最小空间，彻底解决固定宽度在小屏的重叠问题。
2. 1fr的作用：让中间输入框列占据容器所有剩余可用宽度，实现自适应填充。
3. 输入框最小宽度：设置min-width: 40px避免极端小屏幕下输入框过窄，保证基本显示效果。
4. box-sizing: border-box：确保元素的padding和border不会超出容器宽度，防止布局溢出变形。
5. 按钮垂直居中：添加align-items: center让图标在按钮内垂直居中，同时设置height: 100%保证按钮与输入框高度统一，提升视觉一致性。

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