css - 输入不尊重 flex 容器宽度

Question

我在 Chrome 的 flex 容器中有一个 input ，除非我添加一个 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 ，因此默认情况下 flex 元素不能小于其内容，并且在这种情况下 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>