input / button 元素不会在 flex 容器中收缩

Question

在 flex 容器内使用输入和按钮元素时， flex 和/或 flex-grow 属性似乎没有任何作用。

演示我的问题的代码。

 button,
input {
  font-size: 1rem;
}

button {
  border: none;
  background-color: #333;
  color: #EEE;
}

input {
  border: 1px solid #AAA;
  padding-left: 0.5rem;
}

.inputrow {
  width: 30rem;
  display: flex;
  margin: 0 -.25rem;
}

.inputrow>* {
  margin: 0 .25rem;
  border-radius: 2px;
  height: 1.75rem;
  box-sizing: border-box;
}

.nickname {
  flex: 1;
}

.message {
  flex: 4;
}

.s-button {
  flex: 1;
}

 <div class="inputrow">
  <input type="text" class="nickname" placeholder="Nickname">
  <input type="text" class="message" placeholder="Message">
  <button type="submit" class="s-button">Submit</button>
</div>

显示我期望的代码。 （使用 DIV 而不是 input 和 button ） 。

 .inputrow {
  width: 30rem;
  display: flex;
  flex-flow: row nowrap;
  margin: 0 -.25rem;
}

.inputrow>* {
  margin: 0 .25rem;
  height: 1.75rem;
}

.nickname {
  flex: 1;
  background-color: blue;
}

.message {
  flex: 4;
  background-color: red;
}

.s-button {
  flex: 1;
  background-color: green;
}

 <div class="inputrow">
  <div class="nickname">Nickname</div>
  <div class="message">Message</div>
  <div class="s-button">Submit</div>
</div>

原文由 viderizer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

input 元素与 div 不同，带有默认宽度。

这是此设置的简单说明：

浏览器自动给 input 一个宽度。

 input {
  border: 1px solid blue;
  display: inline;
}

div {
  border: 1px solid red;
  display: inline;
}

 <form>
  <input>
  <br><br>
  <div></div>
</form>

此外，弹性项目的初始设置是 min-width: auto 。这意味着项目不能缩小到低于它们在主轴上的宽度。

因此， input 元素不能收缩到其默认宽度以下，并且可能被迫溢出弹性容器。

您可以通过将输入设置为 min-width: 0 来覆盖此行为（ 修改后的代码笔）

这是一个完整的解释： 为什么 flex items 不缩小过去的内容大小？

在某些情况下，您可能需要使用 width: 100% 或 width: 0 覆盖输入宽度。

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我需要用样式元素包装输入元素，然后设置输入 width 和 min-width 如下：

 .field__input input {
  width: 0;
  min-width: 100%;
}

原文由 otaviodecampos 发布，翻译遵循 CC BY-SA 4.0 许可协议