如何防止Flex子元素收缩，保持输入框尺寸并显示警告表情

问题根源是包含输入框和警告表情的d-flex容器中，Flex默认会让子元素根据空间自动收缩，导致输入框尺寸变小。以下两种方法可以保持输入框原有尺寸，同时正常显示警告表情：

方法1：给输入框设置Flex属性，占据容器剩余空间 #

给数量输入框添加flex-grow-1和flex-shrink-0类（Bootstrap自带flex-grow-1，flex-shrink-0用来禁止输入框收缩），同时给外层的d-flex容器加上w-100，确保它占满col-2的宽度：

<div class="col-2 d-flex align-items-center">
  <div class="d-flex align-items-center flex-row w-100">
    <input type="number" name="quantity" class="form-control undefined flex-grow-1 flex-shrink-0" min="0" value="0">
    <span class="ml-1" title="Some Warning">⚠️</span>
  </div>
</div>

方法2：用容器包裹输入框，让输入框占满容器 #

给输入框套一个flex-grow-1的div，再给输入框加w-100类，这样输入框会填满容器空间，警告表情在旁边不会挤压输入框：

<div class="col-2 d-flex align-items-center">
  <div class="d-flex align-items-center flex-row w-100">
    <div class="flex-grow-1">
      <input type="number" name="quantity" class="form-control undefined w-100" min="0" value="0">
    </div>
    <span class="ml-1" title="Some Warning">⚠️</span>
  </div>
</div>

完整修改后的代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="row py-3 border-bottom order-line-item mx-0">
  <div class="col-6 pl-3 pr-4">
    <div class="d-flex align-items-center flex-fill product-detail-field cursor-pointer">
      <div class="d-flex align-items-center flex-fill">
        <div class="ml-3 d-flex flex-column align-items-start flex-fill">
          <div class="d-flex align-items-center w-100">Snowboard</div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-2 d-flex align-items-center">
    <div>
      <input type="number" name="unitPriceAmount" class="form-control undefined" min="0" value="0">
    </div>
  </div>

  <div class="col-2 d-flex align-items-center">
    <div class="d-flex align-items-center flex-row w-100">
      <input type="number" name="quantity" class="form-control undefined flex-grow-1 flex-shrink-0" min="0" value="0">
      <span class="ml-1" title="Some Warning">⚠️</span>
    </div>
  </div>

  <div class="col d-flex align-items-center justify-content-end">
    <div>€0</div>
  </div>

  <div class="col-form-label ml-2 d-flex align-items-center"><span class="cursor-pointer ml-auto mr-1"><i class="fas fa-times"></i></span></div>
</div>

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