如何讓 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

如何讓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>

Answer 2

因為它是文本輸入，所以使用文本縮進而不是填充：

 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>