这些是我使用flex的第一步，我有以下代码:
null
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 14px;
}
.flexbox {
display: flex;
width: 100%;
max-width: 1241px;
height: 30px;
}
label {
flex-basis: 0;
flex-grow: 5;
background-color: cyan;
}
input {
flex-basis: 0;
flex-grow: 13;
background-color: yellow;
margin: 0;
padding: 0;
border: 0;
}
div {
flex-basis: 0;
flex-grow: 6;
height: 10px;
background-color: red;
}<div class="flexbox">
<label>width must = 258.54px</label>
<input type="text" value="width must = 672.20px">
<div>width must = 310.25px</div>
</div>null
一切都按预期进行。 但是，我需要在输入中添加padding-left:25px，因为只有我这样做，flexbox中所有元素的大小都会改变。 我怎样才能在添加填充的同时保持尺寸（我的意思是使用我的解决方案和flex-grow和flex-basis）？
这就是padding:0:
这是我添加padding-left:25px时得到的结果:
如何使弹性增长忽略填充？
弹性增长无法忽略填充:
>
flex-grow消耗可用空间。
填充占用空间。
因此flex-grow必须考虑padding才能正常工作。
这里有一个可能对您有用的变通方法:
null
.flexbox {
display: flex;
max-width: 1241px;
height: 30px;
}
label {
flex: 5 1 0;
background-color: cyan;
}
#input {
flex: 13 1 0;
height: 100%;
}
input {
height: 100%;
width: 100%;
padding-left: 25px;
background-color: yellow;
border: none;
}
div:last-child {
flex: 6 1 0;
background-color: red;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-size: 14px;
}<div class="flexbox">
<label>width must = 258.54px</label>
<div id="input"><input type="text" value="width must = 672.20px"></div>
<div>width must = 310.25px</div>
</div>
因为它是文本输入，所以使用text-indent而不是padding:
null
body {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 14px;
}
.flexbox {
display: flex;
width: 100%;
max-width: 1241px;
height: 30px;
}
label {
flex-basis: 0;
flex-grow: 5;
background-color: cyan;
}
input {
flex-basis: 0;
flex-grow: 13;
background-color: yellow;
margin: 0;
padding: 0;
border: 0;
}
div {
flex-basis: 0;
flex-grow: 6;
height: 10px;
background-color: red;
}<div class="flexbox">
<label>width must = 258.54px</label>
<input type="text" value="width must = 672.20px">
<div>width must = 310.25px</div>
</div>
<div class="flexbox">
<label>width must = 258.54px</label>
<input type="text" value="width must = 672.20px" style="text-indent: 25px;">
<div>width must = 310.25px</div>
</div>