CSS：更改子填充会影响父大小（使用框大小：边框框）答案

【问题标题】：CSS: changing child padding affects parent size (with box-sizing: border-box)CSS：更改子填充会影响父大小（使用框大小：边框框）
【发布时间】：2019-09-18 20:38:50
【问题描述】：

我在我的应用程序中使用 react-bootstrap。考虑这样的布局：

let changed = false
document.querySelector("#addPadding").onclick = () => {
  const elem = document.querySelector('.input')
  elem.style.paddingRight = changed ? 0 : '2rem'
  changed = !changed
}

* {
  box-sizing: border-box;
}

.body {
  /* Width and height are actually unknown,
     set only for presentation purposes */
  width: 600px;
  height: 200px;
  border: 1px solid black;
  
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2rem;
}

.otherStuff {
  background: aqua;
  margin-right: 2rem;
  max-width: 30%;
}

.form {
  background: palevioletred;
  height: 75%;
  padding: 2rem;
  min-width: 40%;
}

.input {
  width: 100%;
  padding: .2rem;
}

<button id="addPadding">Add padding</button>
<article class="body">
  <div class="otherStuff">Some content of unknown size</div>
  <div class="form">
    <input class="input">
  </div>
</article>

如果您运行 sn-p，您会注意到，每次输入的填充发生变化时，父元素的宽度也会发生变化。此外，并非所有视口大小都会发生这种情况：例如，如果.body 的宽度为400px 或800px，它就可以正常工作。填充大小由引导程序在内部更改，因此我无法真正影响它。即使我可以，那也会破坏其他东西。我能做些什么来防止父窗体在这里拉伸？

【问题讨论】：

父级拉伸是文章为弹性盒元素的效果。如果你不想要这个，那么你需要禁止弹性项目增长；不知道这在这里会有多好，因为你只为第一个设置了 30% 的最小宽度，第二个设置了 40% - 这开始有点“模糊”。您应该首先向我们明确说明需要在这里实现的目标。
@04FS，好吧，我唯一想要的就是让.form 保持它的宽度。我同意，尺寸有点模糊。如果我根本找不到解决方案，我当然可以将确切的width 设置为.form，但我想避免它，因为那样我将需要针对不同屏幕尺寸的断点。我还需要澄清什么吗？
bootstrap 如何以及何时更改此输入字段的填充？你说你不能改变它（待观察）——但你首先想要这种效果吗？
@04FS，是的，我希望这种效果存在。发生这种情况时，当输入数据无效时，它会添加一个十字图标以及填充，这样它就不会与输入文本重叠。
那么我认为你不能单独使用 CSS 来解决这个问题，同时保持两个元素的宽度有所变化。

标签： css layout padding

【解决方案1】：

而不是width:100% 将输入视为带有flex-grow:1 的弹性项目

let changed = false
document.querySelector("#addPadding").onclick = () => {
  const elem = document.querySelector('.input')
  elem.style.paddingRight = changed ? 0 : '2rem'
  changed = !changed
}

* {
  box-sizing: border-box;
}

.body {
  /* Width and height are actually unknown,
     set only for presentation purposes */
  width: 600px;
  height: 200px;
  border: 1px solid black;
  
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 2rem;
}

.otherStuff {
  background: aqua;
  margin-right: 2rem;
  max-width: 30%;
}

.form {
  background: palevioletred;
  height: 75%;
  padding: 2rem;
  min-width: 40%;
  display:flex;
}

.input {
  flex-grow:1;
  width:0;
  align-self:flex-start;
  padding: .2rem;
  
  background:yellow content-box; /* To illustrate */
}

<button id="addPadding">Add padding</button>
<article class="body">
  <div class="otherStuff">Some content of unknown size</div>
  <div class="form">
    <input class="input">
  </div>
</article>

【讨论】：

我很乐意，但是，正如我所说，我使用的是引导程序，它自己设置所有样式。即使我自定义它们，也会有很大的变化，它会破坏其余的布局
@AlexChashin bootstrap 不会为您设置样式。 Boostrap 为您提供样式供您使用，您无需自定义任何内容。您只需要正确使用它们。用 bootstrap 分享你的代码，我会用 bootstrap 更新我的答案