html - 如何让 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：

标签： htmlcssflexbox

Answer 1

因为它是文本输入，所以使用文本缩进而不是填充：

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>