如何使输入占用flex容器中的所有剩余宽度？

Question

我正在尝试创建一个将用于移动和桌面用户的简单数字选择器。我的想法是使输入由“加号”和“减号”按钮包围。

除了输入字段的响应能力之外，其他所有东西都工作正常。不知何故，它不会缩小到容器的剩余大小。

因此，我想2 rem在输入周围采用固定大小的跨度（在我的情况下），该跨度占用容器的所有剩余宽度。

这是代码：

body {
  background: #f5f5f5;
}

.outer-container {
  width: 300px;
  border: 1px solid gray;
  padding: 10px;
}

.container {
  display: inline-flex;
  align-items: center;
}

.item {
  dsipaly: inline-block;
  height: 2rem;
  width: 2rem;
  font-size: 2rem;
  line-height: 2rem;
  border: 1px solid black;
  border-radius: 50%;
  text-align: center;
}

input {
  font-size: 2rem;
  margin: 0 10px;
}

<div class="outer-container">
  <div class="container">
    <span class="left item">-</span>
    <input type="text" />
    <span class="right item">+</span>
  </div>
</div>

我创建了一个使用flexbox但不会缩小输入且不会溢出容器的布局。

是否可以使输入缩小以占据所有可用的容器宽度而不会在X轴上溢出容器？

Answer 1

您可以尝试以下方法：

body {
  background: #f5f5f5;
}

.outer-container {
  width: 300px;
  border: 1px solid gray;
  padding: 10px;
}

.container {
  display: inline-flex;
  align-items: center;
}

.item {
  height: 2rem;
  width: 2rem;
  font-size: 2rem;
  line-height: 2rem;
  border: 1px solid black;
  border-radius: 50%;
  text-align: center;
}

input {
  font-size: 2rem;
  margin: 0 10px;
  min-width:0; /* Remove the automatic minimum size set so the element can shrink*/
  width: 87%; /* Set any value of width here as reference*/
  flex: 1; /* make the item grow to fill the remaining space */
}

<div class="outer-container">
  <div class="container">
    <span class="left item">-</span>
    <input type="text" >
    <span class="right item">+</span>
  </div>
</div>