Html 输入/按钮元素不会在 flex 容器中缩小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42421361/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
input / button elements not shrinking in a flex container
提问by viderizer
When using input and button elements inside a flex container, the flexand/or flex-growproperties don't seem to do anything.
在 flex 容器中使用 input 和 button 元素时，flexand/orflex-grow属性似乎没有任何作用。
Code that demonstrates my issue.
演示我的问题的代码。
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>Code that shows what I'm expecting. (using DIVs instead of inputand button).
显示我期望的代码。（使用 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>回答by Michael Benjamin
An inputelement, unlike a div, comes with a default width.
一种input元素，不像div，带有默认的宽度。
Here's a simple illustration of this setting:
这是此设置的简单说明：
The browser automatically gives the inputa width.
浏览器会自动给出input宽度。
input {
border: 1px solid blue;
display: inline;
}
div {
border: 1px solid red;
display: inline;
}<form>
<input>
<br><br>
<div></div>
</form>Also, an initial setting on flex items is min-width: auto. This means that items cannot shrink below their width on the main axis.
此外，弹性项目的初始设置是min-width: auto. 这意味着项目不能缩小到主轴上的宽度以下。
Hence, inputelements cannot shrink below their default width and may be forced to overflow the flex container.
因此，input元素不能缩小到其默认宽度以下，并且可能会被迫溢出 flex 容器。
You can override this behavior by setting your inputs to min-width: 0(revised codepen)
您可以通过将输入设置为min-width: 0（修改后的 codepen）来覆盖此行为
Here's a full explanation: Why don't flex items shrink past content size?
这是一个完整的解释：为什么 flex items 不缩小超过内容大小？
In some cases, you may need to override input widths using width: 100%or width: 0.
在某些情况下，您可能需要使用width: 100%或覆盖输入宽度width: 0。
回答by aviram83
I would like to extend Michael_B solution
我想扩展 Michael_B 解决方案
In some cases, you may need to override input widths using width: 100% or width: 0.
在某些情况下，您可能需要使用 width: 100% 或 width: 0 来覆盖输入宽度。
you can also do calc(100%)
你也可以这样做 calc(100%)
