如何让 flex-grow 忽略填充？

Question

这是我使用 flex 的第一步，我有以下代码：

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>

一切都按预期进行。但是，我需要将padding-left: 25px 添加到我的输入中，因为只有我这样做，flexbox 中元素的所有大小都会发生变化。如何添加此填充并同时保持尺寸（我的意思是将我的解决方案与 flex-grow 和 flex-basis 一起使用）？

这就是我拥有的padding:0：

这是我添加padding-left: 25px时所拥有的：

Answer 1

因为是文本输入，所以使用 text-indent 代替 padding：

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>

Answer 2

如何让flex-grow忽略padding？

flex-grow 不能忽略padding：

• flex-grow 占用可用空间。

• padding 占用空间。

• 所以flex-grow 必须考虑padding 才能正常工作。

这里有一个可能对您有用的解决方法：

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