输入/按钮元素不会在Flex容器中缩小

Question

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

演示我的问题的代码。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

显示我期待的代码。 （使用DIV代替input和button）。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

以下是此设置的简单说明：

浏览器自动为input提供宽度。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

此外，弹性项目的初始设置为min-width: auto。这意味着物品在主轴上的宽度不能缩小。

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

您可以通过将输入设置为min-width: 0（revised codepen）

来覆盖此行为

以下是完整的解释：Why don't flex items shrink past content size?

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

Answer 2

我想扩展Michael_B解决方案

  

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

您还可以执行calc(100%)

Answer 3

如果父级是一个灵活的容器集，使用通常的 flex: 1 (flex-grow: 1) 并且您希望输入随父级一起收缩，这对我有用：

` width: 35px;
  flex: 1 2 0px;`

将此作为输入的类，这将使其在可用时占用整个空间，但在调整大小时缩小到最小大小。

Answer 4

使用 flex-basis: 0; 表示 input 或 input container 可以解决问题。