此问题已在此处有答案：

input / button elements not shrinking in a flex container（7个回答）
Why don't flex items shrink past content size?（5个答案）
3天前关闭。
我现在比我应该做的还要多。我无法在这个flex容器中放入30 x30 px <button>;已经超过了红色边界。到目前为止，我的尝试一直是确保按钮设置正确，但可能与flex忽略的默认输入宽度有关。

.container {
  width: 200px;
  border: solid 1px red;
  box-sizing: border-box;
}

.flex {
  display: flex;
  gap: 10px;
  width: 100%;
}

input {
  flex: 1;
}

button {
  flex: 0 0 30px;
  height: 30px;
  aspect-ratio: 1;
}

<div class="container">
  <div class="flex">
    <input type="text">
    <button>X</button>
  </div>
</div>