输入不尊重弹性容器宽度答案

【问题标题】：Input doesn't respect flex container width输入不尊重弹性容器宽度
【发布时间】：2018-02-13 22:47:39
【问题描述】：

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

【问题讨论】：

输入的默认宽度大于 100px .. 所以用 width:100% 替换 flex-basis 应该可以工作
确切地说是 169px ......而且你不会在默认样式中找到它
IE 也有默认宽度（149px），但不会出现同样的问题。只是 flex-box 实现的区别？
好吧，因为它是 IE，所以并不奇怪 :)

标签： css flexbox

【解决方案1】：

它在 IE 中工作的原因是因为它选择了 flex-basis: 100%，但它不应该。

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

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

堆栈sn-p

.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 元素。

堆栈sn-p

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

【讨论】：

这是真正的答案，其他人通过添加其他样式来避免真正的问题;)

【解决方案2】：

将box-sizing: border-box; 和max-width: 100%; 添加到您的输入中。输入具有默认宽度，可以通过这种方式覆盖/限制。

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

.input-with-button input {
  flex-basis: 100%;
  box-sizing: border-box;
  max-width: 100%;
}

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

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

【讨论】：

为什么不直接使用min-width: 0？
为什么是min-width: 0？那应该怎么做 - 它只确定元素的宽度至少为 0？？？
弹性项目上的 @Johannes min-width: 0 不仅仅是告诉它至少 0 宽，正如您在我的回答中看到的那样。

【解决方案3】：

这个也可以

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

.input-with-button input {
  width: 100%;
}

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

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

【讨论】：

为什么flex-basis会指定flex parent而不是flex child的初始长度？