在响应式布局中占用尽可能少但仍然合理的空间

问题描述

我正在编写一个数量选择器按钮并希望它能够响应。 也就是说，我希望减号和加号只包含图标所需的宽度，中间的输入是最大宽度。

我想知道如何使用 scss 来解决这个问题。

HTML：

<div class="quantity-select-container">
   <div class="btn btn-minus">
      <span class="icon icon-minus">
      </span>    
   </div>

   <input value="1" type="number" min="1" max="100" step="1" pattern="[0-9]*" class="form-control product-detail-quantity-select">

   <div class="btn btn-plus">
      <span class="icon icon-plus"></span>    
   </div>
</div>

SCSS：

.quantity-select-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0 0;
  border: 1px solid black;
  grid-auto-flow: row;
  grid-template-areas: "minus input plus";

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

  input {
    text-align: center;
    grid-area: input;
    padding: 2px;
    width: 100%;
  }

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

  .btn-minus,
  .btn-plus {
    cursor: pointer;
    display: flex;
    justify-content: center;
  }
}

grid-template-columns: 45px auto 45px; 可以解决这个问题，但不是有效的，因为在窄屏幕上，按钮重叠并遮挡了输入，因此它适用于大屏幕，而在小屏幕上不起作用