输入/按钮元素不会在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>

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>

此外,flex项目的初始设置是min-width: auto.这意味着物品不能在主轴上收缩到其宽度以下.

因此,input元素不能收缩到其默认宽度以下,并且可能被迫溢出Flex容器.

您可以通过将输入设置为min-width: 0(修改后的codepen)来覆盖此行为

以下是一个完整的解释:为什么flex项目不会缩小内容大小？

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

Answer 2

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

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

Answer 3

如果弹性框中有一个输入元素，您可以定义width: 0并且仍然可以使用flex: 1您需要的任何值。

\n

这是Christof K\xc3\xa4lin\在另一个答案的评论中的答案。把它放在这里是为了可见性。

\n

\r\n

\r\n

const\n  setValue = (btn, amount) => {\n    const input = btn.closest(\'.stepper\').querySelector(\'.stepper-val\');\n    input.value = +input.value + amount;\n  },\n  handleDecr = e => setValue(e.target, -1),\n  handleIncr = e => setValue(e.target, 1);\n\ndocument.querySelectorAll(\'.stepper\').forEach(s => {\n  s.querySelector(\'.stepper-minus\').addEventListener(\'click\', handleDecr);\n  s.querySelector(\'.stepper-plus\').addEventListener(\'click\', handleIncr);\n});

\r\n

html {\n  font-family: Arial, Helvetica, sans-serif;\n  /* font-size: 3vw; */\n}\n\nhtml, body, div, button, input {\n  box-sizing: border-box;\n}\n\n#atf {\n  height: 100vh;\n  /* flex-container */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.stepper {\n  /* flex-container */\n  display: flex;\n  /* formatting */\n  width: 12rem;\n  height: 2rem;\n}\n\n.stepper-minus {\n  /* flex-item */\n  flex-grow: 1;\n  /* flex-container */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  /* formatting */\n  background-color: deepskyblue;\n  border: 1px solid lightgray;\n  border-radius: .6rem 0 0 .6rem;\n  cursor: pointer;\n}\n\n.stepper-val {\n  /* flex-item */\n  flex-grow: 2;\n  /* flex-container */\n  text-align: center;\n  /* formatting */\n  border-top: 1px solid lightgray;\n  border-bottom: 1px solid lightgray;\n  border-left: none;\n  border-right: none;\n  width: 0;\n}\n\n.stepper-plus {\n  /* flex-item */\n  flex-grow: 1;\n  /* flex-container */\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  /* formatting */\n  background-color: deepskyblue;\n  border: 1px solid lightgray;\n  border-radius: 0 .6rem .6rem 0;\n  cursor: pointer;\n}\n\n.stepper>button:hover {\n  background-color: blue;\n}

\r\n

<div id="atf">\n  <div class="stepper">\n    <button class="stepper-minus">&minus;</button>\n    <input class="stepper-val" type="text" name="val" value="32">\n    <button class="stepper-plus">&plus;</button>\n  </div>\n</div>

\r\n

\r\n

\r\n

\n

编辑：将此答案作为社区维基，这样我就不会获得不劳而获的荣誉。

\n