Flexbox：如何防止子按钮填充超出框的末尾？

Question

我正在使用 div 和 display:flex; 并且没有换行来拉伸单个文本输入标签以满足其右侧的单个按钮。问题是，<input type="button"> 标签有明显添加的填充在 flexbox space 被 div 争夺后，所以按钮最终粘住了超出 flexbox 的右侧。 Example:

<div style="width:200px;">
    <div style="display:flex;">
        <input placeholder="placeholder" style="flex-grow:1;flex-shrink:1;">
        <input type="button" value="Save" style="padding-left:5px; padding-right:5px; flex-shrink:0;">
    </div>
</div>

（fiddle 设置了额外的样式以显示按钮突出的位置）

如果我使用检查器删除填充，则保存按钮适合。我在 CSS 中缺少什么来让按钮的填充应用在 dividing space 之前，以便所有内容都适合 div?我什至无法找到任何讨论这个问题的东西（规范只提到使用百分比填充的特定情况），但这种行为在 Firefox 和 Chrome 中都存在。我试过将按钮包装在 div 中，但这并没有改变行为。

Answer 1

我想这就是你想要的：

无需对第二个输入应用任何伸缩收缩...只需让它尽可能大，包括填充即可。然后 flex:1 在第一个输入上只是告诉它占用任何剩余的 space.

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.parent {
  width: 200px;
  background-color: yellow;
  padding: 1em 0;
}
.child {
  display: flex;
  background-color: red;
  height: 30px;
}
.left {
  flex: 1;
  background-color: green;
  height: 20px;
}
.right {
  padding-left: 5px;
  padding-right: 5px;
  background-color: green;
  height: 20px;
}

<div class="parent">
  <div class="child">
    <input class="left" placeholder="placeholder" />
    <input class="right" type="button" value="Save" />
  </div>
</div>

Flexbox：如何防止子按钮填充超出框的末尾？

Flexbox: how to keep child button padding from extending past the end of the box?

css

flexbox