输入不符合弹性容器的宽度

Question

我input在Chrome的flex容器中有一个容器，除非我添加，否则它不尊重容器的宽度min-width: 0。这似乎在IE中正常工作。

这里发生了什么？

.input-with-button {
  display: flex;
  width: 100px;
  border: 5px solid blue;
  margin-bottom: 10px;
}

.input-with-button input {
  flex-basis: 100%;
}

<div class='input-with-button'>
  <div>Test</div>
</div>

<div class='input-with-button'>
  <input>
</div>

Answer 1

它在IE中起作用的原因是因为它选择了flex-basis: 100%，但事实并非如此。

它在Chrome中溢出（在IE中应该溢出）的原因是，默认情况下，伸缩项不能小于其内容，因为其min-width设置为auto，并且在这种情况下，form元素（例如）input使用浏览器构建了样式表。

之所以min-width: 0起作用，是0因为将其设置为flex项时，因为其flex-shrink值为1（默认值），允许其收缩，并且确实会调整其父级的宽度。

堆栈片段

.input-with-button {
  display: flex;
  width: 100px;
  border: 5px solid blue;
  margin-bottom: 10px;
}

.input-with-button input {
  flex-basis: 100%;
  min-width: 0;                        /*  added  */
}

<div class='input-with-button'>
  <div>Test</div>
</div>

<div class='input-with-button'>
  <input>
</div>

作为旁注，正如其他答案所述，更改元素的默认宽度当然也可以作为一种选择，无论它是否为form元素。

堆栈片段

.input-with-button {
  display: flex;
  width: 100px;
  border: 5px solid blue;
  margin-bottom: 10px;
}

.input-with-button input {
  /*flex-basis: 100%;                     removed  */
  width: 100%;                        /*  added  */
}

<div class='input-with-button'>
  <div>Test</div>
</div>

<div class='input-with-button'>
  <input>
</div>